シンプルで使い勝手の良いボタンデザインを集めました。
必要に応じてカスタマイズして使ってみてください。
シンプルでかわいいボタンデザイン9選
背景色つき
背景色がついているだけ。どシンプルです。
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px; //ボタンの長さ
height: 50px; //ボタンの高さ
background: #c1ebf2; //背景色
border-radius: 3px; //角を丸くする
line-height: 50px;
padding-left: 1em; //左の余白
}
背景色 ＆ 矢印つき
シンプルなボタン矢印部分（三角）は疑似要素で実装しています。
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
background: #c1ebf2;
border-radius: 3px;
line-height: 50px;
padding-left: 1em;
position: relative;
}
.btn::after {
position: absolute;
content: "";
top: 50%;
left: 90%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 10px;
border-color: transparent transparent transparent #333;
}
三角部分のCSSはこちらのツールが大変便利！です！
三角形のCSSを簡単作成！
eky.hk
This domain may be for sale!
apps.eky.hk
立体風
シンプルなボタンボタン下部に影をつけると立体的になります。
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
background: #c1ebf2;
border-radius: 3px;
line-height: 50px;
padding-left: 1em;
-webkit-box-shadow: 0px 5px 0px #80bdc7;
box-shadow: 0px 5px 0px #80bdc7;
}
背景色をグラデーションに
シンプルなボタン背景色をグラデーションにしてみました。
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
border-radius: 3px;
line-height: 50px;
padding-left: 1em;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#c1ebf2), to(#80bdc7)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #c1ebf2 0%, #80bdc7 100%) 0% 0% no-repeat padding-box;
}
枠線で囲う
シンプルなボタン枠線で囲っただけ。汎用性があって良きです◎
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
border: solid 2px #333;
line-height: 50px;
padding-left: 1em;
}
サークル状
シンプルなボタン
丸く塗りつぶしただけのシンプルデザインです。
<a href="#" class="btn">シンプルな<br>ボタン</a>.btn {
display: inline-block;
width: 123px;
height: 123px;
border-radius: 50%;
background: #c1ebf2;
text-align: center;
line-height: 1.5em;
padding-top: 40px;
}
丸角にする
シンプルなボタン丸角にするだけでもかわいい印象に。
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
background: #c1ebf2;
border-radius: 115px;
line-height: 50px;
padding-left: 1em;
position: relative;
}
.btn-7::after {
position: absolute;
content: "";
top: 50%;
left: 90%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 10px;
border-color: transparent transparent transparent #333;
}
ステッチ風の囲み
シンプルなボタン個人的に断トツかわいいと思っています(笑)
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
background: #c1ebf2;
border-radius: 3px;
line-height: 50px;
padding-left: 1em;
-webkit-box-shadow: 0px 0px 0px 5px #c1ebf2;
box-shadow: 0px 0px 0px 5px #c1ebf2;
border: dashed 2px #FFF;
}
立体の付箋風
シンプルなボタンこちらもかわいくてお気に入りのデザインです。
<a href="#" class="btn">シンプルなボタン</a>.btn {
display: inline-block;
width: 230px;
height: 50px;
border-left: 5px solid #c1ebf2;
background: #fffafa;
line-height: 50px;
padding-left: 1em;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
おわりに
今後も随時追加していこうと思います。
見て頂いた方にとって、少しでもお役に立てたら嬉しいです。
最後まで読んでいただき、ありがとうございました。
コピペで使える見出しデザイン集
コメント