今回は、ブログや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;
}めちゃめちゃ目立ちます。
今回は以上です！
最後までみてくださり、ありがとうございました！