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

投稿者： くりりん
カテゴリー： マークアップ >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だけで表現できることでサイト全体の軽量化にもなりますし、デザインの表現の幅が広がることでユーザーにとってもボタンだと認識しやすくなりますね。
今回例にあげたボタンデザインもサイトの雰囲気に合うように色や形を変えてご活用ください♪