制作のご相談はこちら
コピペでできる立体的なCSSボタンデザイン集

公開日 : 2018年08月13日 / 最終更新日 : 2018年11月05日

コピペでできる立体的なCSSボタンデザイン集


サイトには欠かせないボタンですが、どんなボタンにしたいかすぐにイメージがつかめるようにコードサンプルをまとめました。
今回は陰影を使った立体的なボタンデザインくくりです。
そのままコピー&ペーストできますので、時間短縮にぜひご活用ください。
※IEだと表示に違いが出てきますので、その点は都度調整してください。

以前書いた記事はこちら
コピペでできるCSSボタンマウスオーバーエフェクト集

CSSだけで表現できる押したくなるボタンリスト

1. ボタン基本形

まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。
フォントの大きさや種類は適宜変更してください。
!importantは当サイトに合わせた記述ですので、基本的に外してください。

2. 陰影のあるボタン

3. おもちゃのようなボタン

4. 滲むように点滅するボタン

5. グラデーションが入れ替わるボタン

6. バイカラーが入れ替わるボタン