スポンサーリンク

ブロガー必見! おしゃれなサイトデザインに使える、ボタンデザイン5選

image:titile ブログ

こんにちは、Mojaです。

みなさま、Code Pen というWebサービスをご存知でしょうか?

image:code-pen

Code Pen とは、

  • Webブラウザ上でコーディングできる
  • プレビューがすぐ確認できる
  • ソースコードが共有できる
  • 他人のソースも編集できる
  • ソースをWebサイトに埋め込むのが簡単にできる
  • 対応言語:HTML, CSS, JavaScript など

参照:Qiita

という便利なサービス。

無料で使えて、サイトデザインに応用できる、
おしゃれなコードがいっぱい掲載されています♩

今日は、

そんなCode Penで見つけた、オススメのボタンデザインをご紹介します!

Code Pen で見つけたオススメのボタンデザイン5選!

シンプルなデザインかつFontが可愛いボタン

HTMLとCSSだけで実装されたシンプルなボタン。
ボタンに表示されたフォントも可愛らしいですね。

See the Pen Some buttons… by Ottis Kelleghan (@cheeriottis) on CodePen.

思わずフォローしたくなるようなTwtterボタン

マウスのカーソルをボタンの上に載せると、
Twitterアイコンが開いて中にフォローボタンが現れるデザイン。
こんな素敵なデザインが、HTMLとCSSだけで実装されているなんて驚きです!

See the Pen Twitter Button Concept by Erik Deiner by Bennett Feely (@bennettfeely) on CodePen.

落ち着いた色合いのボタン

ボタンの色合いも落ち着いていて、
色んなサイトに応用できそう。

See the Pen CSS3 Button Hover Effects with FontAwesome by fox_hover (@fox_hover) on CodePen.

目立つソーシャルボタン

これは、マウスのカーソルを載せると色が変わるデザイン。
動きがあるボタンは、思わず押したくなっちゃいますよね。

See the Pen Sexy Social Buttons by Stephen Burgess (@minimalmonkey) on CodePen.

目立つホバーアクションのボタン

個人的に一番右の「CLICK ME」ボタンのデザインは目を引くから好きです。
アフィリエイトやるならば、思わず押したくなるようなボタンデザインはすごく重要ですよね。

 

See the Pen Three Pure CSS Button by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

 

いかがでしたか?

Code Pen には面白いコードが他にもたくさんシェアされているので、ぜひチェックしてみてください♩

最近、Twitterを始めました。
Followはこちら♩

本日もお読みいただき、ありがとうございました♩

コメント