ホーム HTML&CSS リファレンス
CSSで作る!押したくなるボタンデザイン100(Web用)
2019/04/21
押したくなるボタンデザイン
今回はWeb用のボタンデザインを100個まとめて紹介します。ユニークなボタンもたくさん作ってみました。どれもHTMLとCSSだけ。画像は使っていません。コピペ&必要に応じて修正してご利用くださいませ。

CSSが効かない・反映されないときの対処法まとめ
CSSが効かない・反映されないときの対処法まとめ

CSSがうまく反映されないときはこちらの記事を参考にしてみてください。

この記事の目次
立体的なボタン
フラットなボタン
グラデーションボタン
円形ボタン
SNSボタン
ユニーク・かっこいい系
マテリアルデザイン
参考

1. 立体的なボタン
1. 立体的なボタン
押し込み式

最近Webでよく見かける厚みのあるボタンです。クリック(タップ)すると、沈みます。カーソルを当てるだけで沈むようにしたい場合は「:active」を「:hover」に変えましょう。

影付き

上のボタンに影をつけて、さらに立体感を出してみました。

文字をエンボスに

文字色を暗めにして周りに白っぽいシャドウをつけることで、凹んでいるように見せています。

浮き出し文字

文字の左と上に白の影を、右と下に黒の影をつけることで、文字が浮き上がっているような表現になります。

斜めから見たように

線をボックスの右と下につけることで、右斜め下から見たような立体感が出ます。線の角はにより斜めに削っています。

上から見たように

少し上から見たような形にしてみました。クリック時にはボタンサイズを小さくすることで、奥行きを表現をしています。

遊び心のあるボタン

少しカクカクしたような立体感を出してみました。ポップで明るめな色が合うはずです。

さらにポップに

BUTTON