ボタン候補

UI ＞ ボタン

一覧

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

マウスhoverエフェクト

clickエフェクト

斜め線

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

その他

マウスhover+clickエフェクト

　閲覧数:484　投稿日: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エフェクト

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

設置済


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

未設置


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

clickエフェクト

　閲覧数:446　投稿日: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 依存




斜線

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

設置済


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

その他

　閲覧数:477　投稿日: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次選考

　閲覧数:525　投稿日: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次選考

　閲覧数:467　投稿日: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次選考

　閲覧数:426　投稿日: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 入力
・入力部門の最終候補

最終的に

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

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

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

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


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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 ボタン候補 100
2 タブ切り替え候補 46
3 小見出し候補 36
4 ボタン候補2 ／ 「ボタン」エリア外で「テキスト」表示しても良いの？ 26
5 「ボタン」と「テキストリンク」の使い分け 24
6 モバイル対応メニュー候補 24
7 アイコン 22
8 画像補正 22
9 リンクを新しいタブで開く／IE 20
10 背景CSS シームレスパターン 20
11 デザイン変更 18
12 デザイン変更 18
13 HTML5タグ 及び テンプレート 18
14 「ヴィンテージ」画像フィルタ実行例 18
15 スキップリンク 17
16 HTML5タグ 17
17 CSSセレクタ 17
18 ライセンス変更 17
19 IEエミュレータ 15
20 trタグに背景色 15
2024/10/28 13:39 更新
週間人気ページランキング ／ 10-21 → 10-27
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 16
2 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 11
3 RGB ⇔ Lab | 色変換(色) 8
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
4 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 7
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 7
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 6
5 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
5 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 6
6 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
6 鉄道会社毎のカラーコード | カラーコード(色) 5
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 3
8 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
8 Design 0 3
8 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 3
    9 色モデルイメージ図 | 色変換(色) 2
    9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 2
    9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
    2024/10/28 1:01 更新