【コピペOK】シンプルでかわいいボタンデザイン9選

シンプルで使い勝手の良いボタンデザインを集めました。

必要に応じてカスタマイズして使ってみてください。

スポンサーリンク

シンプルでかわいいボタンデザイン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を簡単作成!
CSS三角形作成ツール
CSS三角形作成ツール - CSSのみで三角形を描く

立体風

シンプルなボタン

ボタン下部に影をつけると立体的になります。

<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);
}

おわりに

今後も随時追加していこうと思います。

見て頂いた方にとって、少しでもお役に立てたら嬉しいです。

最後まで読んでいただき、ありがとうございました。

コピペで使える見出しデザイン集
タイトルとURLをコピーしました