この記事は2017年7月1日に書かれたもので、内容が古い可能性がありますのでご注意ください。
CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。
ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。
そのままコピー&ペーストできますので、時間短縮にぜひご活用ください。
※デモはPC環境でご覧ください
2018/8 CSSボタンデザイン記事を追加しました。
コピペでできる立体的なCSSボタンデザイン集
CSSだけで表現できる押したくなるボタンリスト
1. ボタン基本形
まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。
フォントの大きさや種類は適宜変更してください。
!importantは当サイトに合わせた記述ですので、基本的に外してください。