ボタン候補

UI ＞ ボタン

一覧

　状態:確認中 　閲覧数:1,852 　投稿日:2017-01-01 　更新日:2017-01-07
マウスhover+clickエフェクト

マウスhoverエフェクト

clickエフェクト

斜め線

Web2.0 ボタン
・Pure CSS で光沢系ボタンを実装
・画像ボタンと比較すると、完成度はどうしても低くなる

その他

マウスhover+clickエフェクト

　閲覧数:333　投稿日:2017-01-02　更新日:2017-01-04　

設置済


SVGフィルタによる歪んだボタンのエフェクト
Bootstrap ボタンのデザイン
CSSのみの「Material デザイン」アニメーションボタン
Pure CSS ボタン
box-shadow の ボタン hover エフェクト
アニメーション投票ボタン（pure CSS）
花火のボタン：D



未設置


Button with Built-in Loading Indicator -JS and SCSS
・ボタン → ローディングアニメーション


見送り


Big Fancy 3D Rotating SVG Button
・react使用

マウスhoverエフェクト

　閲覧数:315　投稿日:2017-01-03　更新日:2017-01-04　

設置済


背景カラーが左右に分かれていく ／ 奥から背景をふわっと表示させる #2 ／ 要素がパタッと開く ／ キューブ状にクルッと回転する
ボタンスタイルとエフェクトのインスピレーション
ステッチ装飾のあるボタン ／ ふわっと浮くボタン
シンプルなアイコンhoverエフェクト
3D swing ボタン
ボタンhoverエフェクトのコレクション
Erik Deiner の Twitter Button コンセプト

未設置


私の好きなリンクのhoverスタイル
・TweenLite依存

clickエフェクト

　閲覧数:326　投稿日:2017-01-03　更新日:2017-01-09　

設置済


Squishy Toggle ボタン
Progress ボタン
弾みのあるボタン


未設置


Upload Button
Social Share Button
Shazam-Like Morphing Button Effect

Bullsh*t button with ThreeJS only
・ThreeJS, ThreeCSG 依存




斜線

　閲覧数:330　投稿日:2017-01-03　更新日:2017-01-08　

設置済


SVGで画面全体に斜め線や曲線を引く
斜めのストライプ
CSS（またはSVG）で斜めに2本の線を描くにはどうすればよいですか？

その他

　閲覧数:335　投稿日:2017-01-04　更新日:2017-01-06　

設置済


Email Input Validation 動作 - JS 及び SCSS
Subscribe フォーム #1
Subscribe フォーム #2
Pixie Dust 入力

未設置


4000 Material Design Icons. For Android, desktop and web applications




1次選考

　閲覧数:371　投稿日:2017-01-05　更新日:2017-01-08　

設置候補 … 15


SVGフィルタによる歪んだボタンのエフェクト
・エフェクトが希少

Bootstrap ボタンのデザイン
・何の面白みもないが、ボタンだとひと目で分かる

box-shadow の ボタン hover エフェクト
・かなり良い

アニメーション投票ボタン（pure CSS）
・希少エフェクト
・flexコメントアウトすると正常動作しないため、コード理解が必要

花火のボタン：D
・希少エフェクト
・「display:flex;」依存している

背景カラーが左右に分かれていく ／ 奥から背景をふわっと表示させる #2 ／ 要素がパタッと開く ／ キューブ状にクルッと回転する

ボタンスタイルとエフェクトのインスピレーション

シンプルなアイコンhoverエフェクト

3D swing ボタン

Erik Deiner の Twitter Button コンセプト

SVGで画面全体に斜め線や曲線を引く

「斜線」2本描画

Email Input Validation 動作 - JS 及び SCSS

Subscribe フォーム #1

Pixie Dust 入力

次点 … 2


CSSのみの「Material デザイン」アニメーションボタン
・すっきりしていて今風だが、普通の人がボタンと認識するか、若干不安が残る

ステッチ装飾のあるボタン ／ ふわっと浮くボタン
・「2-2.animationを使って常にボタンがふわふわと浮いているように見せる」は、モバイル右下へ配置すると良いかも

何かの際に参考にするかも … 2


Progress ボタン
・ブログレスバーを設置する際に参考にするかも
・ブログレスバーの進捗状況との連動の仕方は不明

Subscribe フォーム #2

落選 … 5


Pure CSS ボタン
・全体的にイマイチ

ボタンhoverエフェクトのコレクション
・使用する場面を想像できない

Squishy Toggle ボタン
・白背景では、(質感があり過ぎて)汚く見える

弾みのあるボタン
・動きは面白いが、実際に使用する場面を想像できない

斜めのストライプ
・実際にボタンを作成してみたが、期待していた程良い感じでもなかった

1次選考結果


選考総数
・24

2次選考進出
・15／24

1次選考敗退
・9／24

選考期間
・8日間
・2017-1-1 ～ 2017-1-8

2次選考

　閲覧数:327　投稿日:2017-01-08　更新日:2017-01-08　

設置候補 … 15


SVGフィルタによる歪んだボタンのエフェクト
・SVGエフェクトはqualityが高い

Bootstrap ボタンのデザイン
・定番のデザイン
・相対評価によりここで落選
・面白みがない
・新しさがない

box-shadow の ボタン hover エフェクト
・現時点の設置候補No.1

アニメーション投票ボタン（pure CSS）
・安定の設置候補

花火のボタン：D
・相対評価によりここで落選
・使い所がちょっとだけ難しいかも

背景カラーが左右に分かれていく ／ 奥から背景をふわっと表示させる #2 ／ 要素がパタッと開く ／ キューブ状にクルッと回転する
・相対評価によりここで落選
・普通の人にはボタンだと、もしかしたら分かり辛いかも
・アニメーションは面白いが、何度も試す際はウザくなるかも

ボタンスタイルとエフェクトのインスピレーション
・qualityは高い

シンプルなアイコンhoverエフェクト

3D swing ボタン
・相対評価によりここで落選
・悪くはないが、決め手に欠ける

Erik Deiner の Twitter Button コンセプト
・相対評価によりここで落選
・悪くはないが、毎回パカパカ開閉するのも面倒な気がする

SVGで画面全体に斜め線や曲線を引く

「斜線」2本描画
・相対評価によりここで落選
・悪くはないが、決め手に欠ける

Email Input Validation 動作 - JS 及び SCSS
・quality高い

Subscribe フォーム #1
・相対評価によりここで落選
・悪くはないが、同じ入力フォームなら、「Email Input Validation 動作 - JS 及び SCSS」の方が良い

Pixie Dust 入力

3次選考

　閲覧数:290　投稿日:2017-01-08　更新日:2017-05-22　

設置候補 … 8


SVGフィルタによる歪んだボタンのエフェクト
・完成している
・他のカスタマイズ結果次第
・jsで色指定しているため、例えば「カテゴリ毎に異なる色のボタンを複数設置」などという要件には対応が難しい
・依存ライブラリTweenMax.js
・使い所が難しい
・このためだけに、TweenMax.js導入するには、若干の抵抗がある

box-shadow の ボタン hover エフェクト
・要カスタマイズ
・テキスト表示

アニメーション投票ボタン（pure CSS）
・要カスタマイズ
・落選

ボタンスタイルとエフェクトのインスピレーション
・完成している
・他のカスタマイズ結果次第

シンプルなアイコンhoverエフェクト
・アイコン部門の最終候補
・落選

SVGで画面全体に斜め線や曲線を引く
・ボタン部門の設置候補No.5
・デザインのみ
・「hover」「click」 エフェクトなし

Email Input Validation 動作 - JS 及び SCSS
・入力フォーム部門の最終候補

Pixie Dust 入力
・入力部門の最終候補

最終的に

　閲覧数:301　投稿日:2017-05-22　更新日:2017-05-22　
ボタンスタイルとエフェクトのインスピレーション
・完成している
・通常ボタンの第1候補

box-shadow の ボタン hover エフェクト
・要カスタマイズ
・テキスト表示

Email Input Validation 動作 - JS 及び SCSS
・入力フォーム部門の第1候補

Pixie Dust 入力
・入力部門の第1候補


Twitter検索結果。「ボタン候補」に関する最新ツイート

煉獄杏寿郎　@KPlayaaaaaaaz
もっとボタンが仕事した！3候補のうちの1人、嘘つきセリア降臨٩( 'ω' )و後半は完走回避です｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡ #グラサマ https://t.co/AcN7npCjLV　2023/02/05 07:17
KAKERU　@BARKAKERU
タブメイトかぁ。 ボタン数が足りないので候補に入れてなかったけど、 アリかもなぁ。 全部で15キーか。 アンドゥ、リドゥ、拡大、縮小、全画面、手のひら、画面回転、コントロール、シフト、オルト、画面反転で 残り3つ。 足りないけど、一応行けるな。 持ち運び用にはいい。　2023/02/05 05:51
しゅ　@AblPEFM74eMBWua
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/bTBXvspcfL #Simeji #サンリオネクストカワイイSimeji　2023/02/04 21:42
ムノーケイ🐧@RT魔　@Munoh_K
回想。エリアゼロ調査の協力者候補。 ネモとボタンについて、クリアしていればペパーの反応も変わるんですかね？ #ポケモンSV https://t.co/3Y0bB4EXhs　2023/02/04 19:09
けいにゃー　@Unl8C
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/GMjSdyaXy9 #Simeji #サンリオネクストカワイイSimeji　2023/02/04 18:48
あるくす🍆　@arutairiku
おすすめのゲーミングマウス情報募集中 握りやすさ、軽さ、ボタン数とか色々あって悩ましい… 今の所候補はロジクールのG PRO X SUPERLIGHT　2023/02/04 18:47
美琴　@mikoto0731
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/VSvYLRzCip #Simeji #サンリオネクストカワイイSimeji　2023/02/04 16:36
Richey＊　@Richey_p_3zz
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/HXz46eXNPA #Simeji #サンリオネクストカワイイSimeji　2023/02/04 13:43
ZUKIーに　@tkueQ8lhMFVxKWE
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/OQiaN10v4A #Simeji #サンリオネクストカワイイSimeji　2023/02/04 11:25
Manami Tokutake　@ManamiTokutake
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/bcMwcyViOn #Simeji #サンリオネクストカワイイSimeji　2023/02/04 10:31
genyou666　@genyou666
↓当該キット、画像掲示板だと足のシマシマがシールみたいだったので候補からは外したんですけど箱絵がいいっすねー　脳天はボタン電池で光るようで。中華プラは暴食もそうですけど光るゲーミングPCルートになっとるん？　2023/02/04 10:25
うみゃん　@umyan_888
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/NRB3ejBuCW #Simeji #サンリオネクストカワイイSimeji　2023/02/04 09:01
松下夜空🏮　@Activity_7Night
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/PQrRxyrVgG #Simeji #サンリオネクストカワイイSimeji　2023/02/04 00:31
乃亜🍓　@e6vEct5x7B5l34d
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/gCZj5XjQdO #Simeji #サンリオネクストカワイイSimeji　2023/02/03 23:18
トのRi　@T0N0RI
Qin F22 Proの物理ボタンを使用する日本語入力、この手の端末で定番のnicoWnnGを使用することで可能となる。ミニキーボードをニ列以上、もしくは完全表示にすれば物理ボタンに無いクリアキーを補完出来る。ただ辞書に難ありで変換候補に不満が出る https://t.co/ltOnIPkLoH　2023/02/03 22:51
@7rvzh　@__hyn07
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/vhp87jDUw8 #Simeji #サンリオネクストカワイイSimeji　2023/02/03 22:19
トラねこ　@games_tora
PS5で文字入力する時に今までは「R1ボタン」で直近の入力候補(一番左に表示された文字列)で決定されていたけど、βファームウェアでは入力候補の一覧に移動するだけになったから文字入力がかなりやりやすくなった (入力候補一覧で「R1ボタン」を押すとまた仮想キーボードに移動する)　2023/02/03 22:16
山崎文弘　@AROlCebUBLfkEOd
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/XN5yUGUw12 #Simeji #サンリオネクストカワイイSimeji　2023/02/03 21:55
こもりん@5a!　@komori_cosac
候補は シロナさん ボタン レムorラム ここは長袖だから行ける その他は寒くて無理かも　2023/02/03 18:06
コッペリア016-bot　@coppeliabot
コッペリア003は外観デザイン決定第三候補コッペリアです。容姿決定ランダムボタンで作成された結果、ツインテール、オッドアイ、八重歯、星がちった瞳と盛りだくさんになり、痛い子として死蔵されましタ。　2023/02/03 16:30
；；　@mei08080808
🎉 サンリオNEXT KAWAII PROJECT × #Simeji コラボキャンペーン実施🎉 サンリオの新キャラ候補のきせかえがSimejiに登場✨ 「好き」ボタンを押して、オリジナルきせかえをゲットしよう❣️ https://t.co/nfGg03qZyd #Simeji #サンリオネクストカワイイSimeji　2023/02/03 15:48
anneco(あんこ)@恩返し企画開催中　@anneco1027ch
QRからインスタに飛ぶ方法(iOSバージョン16以上の方対象) 1.画像を保存 2.写真から保存した画像を見に行く 3.画像の右下にある文字認識ボタンをタップ 4.QRタップ 5.いくつか候補が現れるのでInstagramを開くをタップ でOKですー！ https://t.co/Vck740LVTE　2023/02/03 12:39
miiko | Wixでホームページ制作　@miiko_wix
初回の生成がイマイチだった場合、 何回か生成ボタンを押して候補を複数個作る →比較（保存ボタンで後から見返せる。） #Catchy　2023/02/03 12:11
ひざ掛け奉行@お仕事募集中　@Yv0cG9yg6rwxLsF
大人化イラストのボタンの髪型候補、結構コメントが満遍なくバラけた。 これは想定外・・・。 意外と三つ編みも人気なのが驚いた。 衣装から完成させて考えた方がいいパターンかも。　2023/02/03 12:09
komatchy　@komatchy
@t_shirasawa www この機能、いつのまにかできてましたね。 右下のリンクボタンを押したら、ブックマークが候補に出てきて気づきました。 https://t.co/Cf706IyeHZ　2023/02/03 11:34

ボタン候補2 ／ 「ボタン」エリア外で「テキスト」表示しても良いの？



類似度ページランキング
順位 ページタイトル抜粋 ％
1 タブ切り替え候補 46
2 小見出し候補 36
3 ボタン候補2 ／ 「ボタン」エリア外で「テキスト」表示しても良いの？ 26
4 「ボタン」と「テキストリンク」の使い分け 24
5 モバイル対応メニュー候補 24
6 アイコン 22
7 画像補正 22
8 背景CSS シームレスパターン 20
9 リンクを新しいタブで開く／IE 20
10 デザイン変更 18
11 デザイン変更 18
12 HTML5タグ 及び テンプレート 18
13 「ヴィンテージ」画像フィルタ実行例 18
14 CSSセレクタ 17
15 スキップリンク 17
16 HTML5タグ 17
17 ライセンス変更 17
18 IEエミュレータ 15
19 trタグに背景色 15
20 HTMLエディタ 15
2023/2/05 7:22 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 25
5 RGBの種類 ／ ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新