WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

くりりん

2021/09/21

画像不要!CSSで作るボタンデザインのご紹介♪

投稿者: くりりん
カテゴリー: マークアップ >CSS

ボタンデザインにも色々な種類がありますよね。CSSだけでデザイン表現できる幅が格段に増えてきましたし、hoverアクションの動き一つでWebサイトの雰囲気を変えたり洗練された雰囲気を出すことができます。
そこで最近よく使う、CSSだけでデザインができるボタンをまとめてみましたので、ぜひ活用ください!

矢印ボタンデザイン1

最近よく使うhoverをしたら背景色と矢印が変化するボタンデザインです。

See the Pen
矢印ボタンデザイン
by saki kurita (@saki_0415)
on CodePen.

矢印ボタンデザイン2

こちらはシンプルにhoverをしたら矢印アイコンが右に移動します。

See the Pen
矢印が右に移動するボタン
by saki kurita (@saki_0415)
on CodePen.


矢印の見た目は疑似要素を使うことで表現できるのと、動きはpositionで設定した位置からhover時の設定位置を変えることで表現することができますね。

きらりと光るボタン

次にhoverをするときらっと光る表現ができるボタンです。

See the Pen
きらっと光る
by saki kurita (@saki_0415)
on CodePen.


ボタンの背景色を変えることで高級感をだしたり、光らせることで目立たせることができますね。

グラデーションが変化するボタン

See the Pen
グラデーションが変化するボタン
by saki kurita (@saki_0415)
on CodePen.


最後はグラデーションが変化するボタンです。
グラデーションの最初の位置からhoverをした際のグラデーションの位置によって色を変化させています。

まとめ

画像を使わずCSSだけで表現できることでサイト全体の軽量化にもなりますし、デザインの表現の幅が広がることでユーザーにとってもボタンだと認識しやすくなりますね。
今回例にあげたボタンデザインもサイトの雰囲気に合うように色や形を変えてご活用ください♪

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ