お久しぶりです！Webエンジニアのざきやまです！
入社したての頃に書いて公開した「コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選」の記事が好評をいただいているようなので今回はその第2弾ということでコピペだけで簡単実装できるお洒落なボタンを紹介して行きたいと思います！
今回もJS、画像不要でHTML/CSSのみのコピペで実装できちゃいますのでぜひ使ってみてくださいね〜
前回は比較的シンプルなものが多かったので今回は少しデザイン性の高いものに挑戦しましたので、デザイン性の高いボタンを実装したい方にオススメです(^^)/
目次
ホバーアニメーション
◉ ホバーするとサイズ小さくなるボタン
ホバーするとゆっくりと枠のサイズが小さくなり、中央から広がるように背景色を変えるアニメーションです！
ボタンのアニメーションによく::before、::afterの擬似要素を使うことが多いと思いますが、スマホタップ時に反応が鈍くなったりなど問題が起こることがあるため、デザインとしてだけ見せたい擬似要素には「pointer-events: none;」をつけてクリック/タップイベントを無効化します。
◉ ホバーするとローディングのような動きをするボタン
ホバーするとローディングのように枠線を一周するアニメーションです。
本当のローディングのように待たせたいわけではないので早めにアニメーションが終わるように設定しています！
◉ ホバーすると囲み線が動き出すボタン
こちらもボタンを一周ぐるっと線で囲むアニメーションです。
◉ ホバーするとくるっと回転して裏面を表示するボタン
実際には裏面を見せている風ですが、裏をめくると違うメッセージに切り替えるなど変わった表現ができます！
デザインボタン
◉ 手書き風のボタン
手書き風ということで手書きっぽいWebフォントを使ったのですがCodePen上で何故かエレガンスなフォントに置き換わってしまう…((;ﾟェﾟ;))
原因がわからないので、利用するときは自由にフォントを置き換えてご利用ください！
Webフォントはこちらから → GoogleFonts
◉ 四角×丸×三角すべて使ったボタン
ホバー時にいろんな図形が出現する欲張りデザインです！
その他のボタンCSS実装
◉ ホバー時にSVG画像の色をCSSだけで切り替える
ボタンに画像が使われていてホバー時に色を切り替える、というデザインがよくありますよね
この場合は画像を二つ用意して配置して…とコーダーにとっては若干めんどくさいしスマートじゃないしモヤモヤすることがあります..
パスが複雑じゃない簡易的な画像であればSVG要素で配置してpathの色をCSSで変えちゃいましょう！
当社のサイトに使っているボタンもこちらで作成しています！
まとめ
いかがでしょうか？
アニメーションの秒数やカラーを変えるだけで大分印象を変えることができますので、自由にカスタムして使ってみてください！
もう少しオーソドックスでシンプルなボタンをお探しでしたら第1弾をぜひご覧になってみてください(^^)/
「コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選」
