CSSのみで実装するボタンデザインのスタイルまとめ

1.Webサイト上でのボタンのデザインについて

aタグやinputタグ、buttonタグなどで実装されるボタンは、Webデザインを制作する過程で重要な役割を担っています。

丸ごと画像で配置したりする場合もありますが、最近はレスポンシブデザインの対応で形が変わったり、読み込み速度の向上を狙って、可能な限りはCSSで実装することが増えていきます。

CSS3では角丸を表現するborder-radiusや、影を表現するbox-shadowなどもあり、表現の幅が昔より広がっています。

これらを組み合わせて、ボタンのスタイルを作ってみましょう。
 

2.ボタンデザイン例 7選

デザイン例と共に実際に記述したコードを掲載します。

下記は全デザイン共通のHTML/CSSです。

HTML

<a class="btn" href="#">Sudie</a>

CSS

a{
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  margin: 50px;
  width: 120px;
  padding: 0.5em 1em;
}

シンプルな浮き出しボタン

影をつけて立体感を出し、浮き出ている雰囲気にしたベーシックなボタンです。

.btn{
  background: #142c5b;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

ポストイット風

ポストイット風のラベルっぽいデザインのボタンです。よく使用されているような気がします。

.btn{
  background: #FFF;
  border-left: solid 5px #142c5b;
  color: #142c5b;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}

グラデーション

ベーシックなデザインにグラデーションをかけ、少し雰囲気を変えたボタンです。

.btn{
  border-radius: 5px;
  background-image: linear-gradient(45deg, #98b8f7 0%, #142c5b 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  border-bottom: solid 3px #142c5b;
}

ステッチラベル

ステッチが入ったラベルっぽい雰囲気のボタンです。カジュアルなデザインに合いそうです。

.btn{
  background-color: #142c5b;
  border: 1px dashed #FFF;
  box-shadow: 0px 0px 0px 5px #142c5b;
}

平行四辺形

斜めに切ったような平行四辺形のボタンです。こういった少し変わった形もたまに目にしますね。

.btn{
  position: relative;
  height: 40px;
  line-height: 40px;
  background: #142c5b;
  transition: .4s;
  padding: 0;
}

.btn:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 21px white;
  border-bottom: solid 41px transparent;
  z-index: 1;
  transition: .4s;
}

.btn:after {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 21px transparent;
  border-bottom: solid 41px white;
  z-index: 1;
  transition: .4s;
}

パッチワーク風

縦横のボーダーを交差させてパッチワークな雰囲気を出したボタンです。

.btn{
  position: relative;
  border-top: solid 3px #142c5b;
  border-bottom: solid 3px #142c5b;
  color: #142c5b;
}
.btn:before, .btn:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 3px;
  height: calc(100% + 14px);
  background-color: #142c5b;
  transition: .3s;
}
.btn:before {
  left: 7px;
}
.btn:after {
  right: 7px;
}

ピアノ(?)風

ピアノっぽい雰囲気のボタンを作ろうとしたのですが定規っぽくなってしまったような気がしてます・・・。

.btn{
  position: relative;
  background: #142c5b;
}
.btn:before {
  content: '';
  position: absolute;
  z-index: -2;
  height: 10px;
  box-sizing: border-box;
  width: 100%;
  top: 100%;
   top: calc(100% - 2px);
  left: 0;
  background: linear-gradient(-90deg, #142c5b 1px, transparent 0) 0 1px,
              linear-gradient(90deg, #142c5b 5px, #fff 0) 0 1px;
  background-color: #142c5b;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 10px;
  transition: .2s;
}

3.まとめ

いかがでしたでしょうか。

各ボタンの色味を変えるだけでも雰囲気は大きく変わるかと思いますが、ちょっとした装飾を施す事によってボタンひとつひとつにも個性を出すことができます。

要素としては決して大きくはありませんが、ボタンはUIの要となる重要なパーツなので丁寧かつこだわりを持って制作する必要があります。

もちろんあくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！