この記事は2018年8月13日に書かれたもので、内容が古い可能性がありますのでご注意ください。
サイトには欠かせないボタンですが、どんなボタンにしたいかすぐにイメージがつかめるようにコードサンプルをまとめました。
今回は陰影を使った立体的なボタンデザインくくりです。
そのままコピー&ペーストできますので、時間短縮にぜひご活用ください。
※IEだと表示に違いが出てきますので、その点は都度調整してください。
以前書いた記事はこちら
コピペでできるCSSボタンマウスオーバーエフェクト集
CSSだけで表現できる押したくなるボタンリスト
1. ボタン基本形
まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。
フォントの大きさや種類は適宜変更してください。
!importantは当サイトに合わせた記述ですので、基本的に外してください。