お見積り依頼
GG KNOWLEDGE
GrowGroupスタッフからお役立ち情報を発信!

【第2弾】コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード7選

お久しぶりです!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選」


この記事が気に入ったら
「いいね!」

この記事を書いた人

マークアップエンジニア ざきやま

2017年7月にマークアップエンジニアとして入社した新人ほやほやの「ざきやま」です。

よろしくお願いします!!


関連コンテンツ

GrowGroupなら、
解決できます。

より多くの企業様のお力になりたい。
まずはお気軽にお問い合わせください。

052-753-6413 受付 / 平日10:00〜19:00 お見積り依頼 資料請求