【コピペだけ】ブログやWebサイトで使えるボタンデザイン【CSS】

ボタンデザイン

今回は、ブログやWebサイトで使えるボタンデザインを紹介していきます。

ボタンの見た目で、成約率やクリック率が変わるのでぜひ実装してみてください!

それでは、さっそくいきましょう!

スポンサーリンク

共通のHTML

まずは、ボタンを作る前にボタンを作るHTMLを紹介します。

HTML

<a href="#"class="button">ボタン</a>

これと、_番号でデザインを作れます。

それでは、デザインを紹介していきます。
※デザインは随時更新します。m(_ _)m

スポンサーリンク

ブログやWebサイトで使えるボタンデザイン

シンプルなボタンデザイン

シンプルなボタンデザイン

css

.button_1 {
padding: .5em 2.5em;
border: solid 2px #63acb7;
border-radius: 4px;
text-decoration: none;
color: #63acb7;
}

.button_1:hover {
color: #fff;
background: #63acb7;
}

ホバーすると色が変わります!

グラデーションつきのボタンデザイン

グラデーション

css

.button_2 {
padding: 0.5em 2.5em;
text-decoration: none;
border-radius: 4px;
background-image: linear-gradient(45deg, #ee1616 0%, #e67561 100%);
text-decoration: none;
color: #fff;
}

グラデーションが超美しいです!

文字ごとボタンにした大胆なデザイン

でかいボタン

css

.button_3 {
text-decoration: none;
letter-spacing: 2px;
text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #fe2222,
0px 2px 0px #4f6aa7, 0px 3px 0px #f42222;
font-size: 2.5em;
color: #df5d40;
}

めちゃめちゃ目立ちます。

今回は以上です!
最後までみてくださり、ありがとうございました!