ホームkeyboard_double_arrow_rightナレッジブログkeyboard_double_arrow_right【第2弾】コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード7選

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

ざきやま
  • テクノロジー
  • マークアップ
  • Webデザイン
公開: 2020.08.07 更新: 2022.01.17

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

制作の流れについて
  • 制作の流れ
  • 制作フェーズ
  • 運⽤フェーズ
  • お問い合わせ
  • 会社概要
GrowGroupの会社概要をはじめ、
成功事例などをご紹介しています。
  • 会社概要
  • 制作実績
  • 事業コンセプト
  • 会社概要
見積もりを依頼する見積もりを依頼する
顧客の課題解決を行い、成果を上げたGrowGroupの成功事例
GrowGroupは、ただただ制作するだけではありません。ご依頼の背景、⽬的からWebサイトの⽅向性を⾒極め「⽬的の達成」を第⼀に制作しています。

著者情報
Webプロデューサー
ざきやま

2021年に、WebエンジニアからWebプロデューサーへとキャリアチェンジいたしました。
4年間のエンジニア経験のもと、機能性が高くユーザーにとっても編集者にとっても使いやすいWebサイトのご提案を得意としております!


弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています
メルマガ登録に登録するメルマガ登録に登録する