皆さん、こんにちは！
以前にCSSで表現するアニメーションサンプル集を紹介しました。
今回はCSSで表現するボタンのデザインを紹介したいと思います！
この記事の目次
クリックしたくなるCSSボタンデザイン10選
CODEPENから引用しまとめましたのでご参考ください！
シンプルな立体ボタン
0
よく見かける影と角を少し丸くしたボタン。
これが一番無難な気がします。
認証を促すボタン
0
ホバーするとアイコンの背景色が変わるボタン。
同意など求めるボタンに有効そう。
いわゆるマテリアルデザインのボタン
0
奥行きを感じられるボタン。
モダンなサイトに多くみられるやつです。
ラジオボタンをフラットデザインで表現
0
デフォルとのラジオボタンって小さくてクリックしづらくないですか？
ボタン風にすることでクリックしやすくなりそうですね。
ホバーすると線が伸びるボタン
0
ボタンの下線がぬるっと伸びるボタン。
ホバー時の動きって以外と大事ですよね。
アニメーションで主張するボタン
0
「Click me!!」て感じのボタン。
常時アニメーションしているので思わずクリックしてしまいそう。
もはやボタンでもない気もするボタン
0
カードが刺さっているようなデザインのボタン。
押すというよりも引き抜く感じ。
押すと爆発しそうなボタン
0
まごうとなき自爆スイッチのそれです。
私はとりあえず10回押しました。それくらい押したくなる衝動に駆られる。
ONとOFFを切り替えるボタン
0
ONとOFFの切り替えボタンです。
色も変わるのでONとOFFの区別がつきやすいです。
ネオンっぽく光るボタン
0
ネオンっぽく光るボタン。
ボタン以外のところでも使えそう。