【コピペで簡単】HTML+CSSで作るボタンデザイン集

本サイトはアフィリエイト広告を利用しています

「お問い合わせ」「購入」「予約する」など、重要な役割を果たすボタンデザインはこだわってデザインする必要があると思います。

今回は、HTMLとCSSを使って簡単にボタンデザインが可能なソースコードを都度更新していきます。

スポンサーリンク

 

シンプルボタン

まずはベースとなるシンプルなボタンデザインです。マウスオーバーすると「opacity」で少し透過させるようにしています。

See the Pen Untitled by cape (@C-A-P-E-DESIGN) on CodePen.

 

角丸のシンプルボタン

それぞれの角を丸くするパターンです。マウスオーバーすると「opacity」で少し透過させるようにしています。

See the Pen シンプルボタン-角丸 by cape (@C-A-P-E-DESIGN) on CodePen.

 

立体ボタン

ボーダーとシャドウで立体的に見せています。マウスオーバーすると「transform」で押したような動きをするようにしています。

See the Pen 立体ボタン by cape (@C-A-P-E-DESIGN) on CodePen.

 

枠線ボタン

ボーダーのみで表現しています。マウスオーバーすると「opacity」で少し透過させるようにしています。

See the Pen 枠線ボタン by cape (@C-A-P-E-DESIGN) on CodePen.

 

円形ボタン

丸型のボタンなのでアイコンなどにも転用できます。

See the Pen 丸型ボタン by cape (@C-A-P-E-DESIGN) on CodePen.

 

ニューモフィズムデザインのボタン

ニューモフィズムとは、ニュー[new]＋スキューモフィズム[skeuomorphism]を組み合わせた新しいスタイルのデザイン手法のことです。

スキューモーフィズム（skeuomorphism）の語源は、ギリシャ語の”skeuos”（容器・道具）と “morphê” (フォーム・形状)という単語を組み合わせたもの

 

See the Pen ニューモフィズムボタン by cape (@C-A-P-E-DESIGN) on CodePen.

 

グラデーションボタン

グラデーションでデザインされたボタンです。

border-image: linear-gradientを指定するだけでも枠線のグラデーションは実現可能ですが、角丸には対応できないので擬似的に表現しています。

See the Pen グラデーションボタン by cape (@C-A-P-E-DESIGN) on CodePen.

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