CSSだけで実装するクリックしたくなる BUTTON デザイン集

こんにちは、普段ユーザビリティとカンプを両天秤にかけながらコードをせっせと書いているリードスペースです。

いつも地味な仕事ばかりしているので、CSSなどでボタン等に動きをつける時はドヤ顔になれます。
そこでCSSだけで実装するボタンの基本から、ちょっと手の込んだデザインまでご紹介します。

ボタンはコンバージョンにつなげる重要なパーツ

ボタンはWeb制作でとても重要なパーツの一つです。

お問い合わせフォームなどの送信ボタンのデザインの良し悪しで、コンバージョン率にかなり影響が出てきます。なので、見た目やホバー効果に情熱を注ぐクリエーターはたくさんいると思います。

アイコン、文字、下に敷く色の3点セットで作ると情報設計上◎（ニジュウマル）

ボタンは情報設計も大切！まず、大半のユーザーに嬉しい基本的なデザインをご紹介します。

四角で囲ったり下に色などを引いて他のコンテンツと差別化し目立たせます。
次に、簡潔なラベルと、アイコン（インフォグラフィック）で情報を補足しましょう。

例えば、下のようなボタンをみてみましょう。文言：お問い合わせ、アイコン：メールマーク、長方形オレンジを背景に敷いてみます。

ちなみに、背景に何か敷くことを座布団と呼ぶ人もいるそうです(弊社デザイナーに確認)。紙のデザイン方面でもよくやるそう。

今回はコンバージョンに繋がりやすいと言われているオレンジでサンプルのボタンを作ってみました。パキッとしたオレンジは他のコンテンツと差別化＆目立足せるのに有効的です。「お問い合わせ」の文字だけではなくメールのアイコンが「問い合わせボタン」だということをユーザーにしっかり認識してもらうことができますね。

よくアイコンのみのボタンを見かけますが不十分だと思ってます。コンバージョンにつなげたいボタンならなおのことだと思います。私はその他、以下に配慮してコーディングしてます。

たまにデザイナーとデザインを一緒に考えたりすることもあります。ユーザビリティは大事。

基本のボタン

スタンダードなものをご紹介

まずはスタンダードなボタンをご紹介します。
全てオレンジで作ってますが、色を変えれば守備範囲はかなり広くなると思います。

* 無駄なコードを省く為、CSSのリセットやプレフィックスを省いてます。実装の際は対応必要なブラウザに応じてプレフィックス付与してください。
* スマホではアニメがうまく動かない恐れがあります。ご了承ください。

[code title=”css”]//基本
.btn {
  display: inline-block;
  color: #ffffff;
  background: orangered;
  padding: 15px 30px;
  text-decoration: none;
}
//角丸
.radius {
  border-radius: 5px;
}
//反転
.border {
  border: 2px solid orangered;
  padding: 13px30px;
}
//グラデーション
.graduate {
  background: #ffa670;
  background: linear-gradient(to bottom, #ffa6700%, #fc580065%);
}
.btn {
  transition: .3s; //全てのボタンにtransition設定
}
// ホバーしたら半透明
.btn.default:hover {
  opacity: 0.5;
}
// ホバーしたら反転
.btn.border:hover {
  background: #fff;
  color: orangered;
}
// ホバーしたらベタ塗り
.btn.graduate:hover {
  background: #ffa670;
  background: linear-gradient(to bottom, #fc58000%, #fc580065%);
}[/code]

グラデーションのジェネレータを使えば簡単にグラデーションCSSが作れます。
Ultimate CSS Gradient Generator

ちょっと前に流行ったスケルトンボタン

背景のチョイスがイマイチですが、スケルトンボタンのバリエーションです。
個人的には、視認性に欠けるのであまりオススメしません。

[code title=”css”]//基本のスケルトンボタン
.skerton{
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  transition: .3s;
}
.skerton.default{
  color: #ffffff;
  border: 2px solid #fff;
  padding: 25px 60px;
}
.skerton.default:hover{
  color: #1E1C93;
  background: #fff;
}
//ホバーで背景が半透明
.skerton.default.opacity:hover{
  color: #fff;
  background: rgba(255,255,255,.3);
}
//半透明で立体的なスケルトンボタン
.skerton2 {
  display: inline-block;
  padding: 25px 60px;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
  transition:.3s;
}
.skerton2:hover {
  background-color: rgba(255, 255, 255, .3);
}[/code]

変わったボタン

その他、変わったボタンをご紹介します。

「押したらくぼむボタン」はグラデ以外にも背景ベタ塗りや溝の深さを変えるとバリエーションが増えます。ポイントはくぼみ効果をbox-shadowで再現し、transform: translate(0, 2px);などでコンテンツに支障が出ないようにすることです。box-shadowは影足をボカしすぎると野暮ったくなりますので、短めもしくはパキッとボカさない方がオススメ。

複雑な効果を実装したい時は擬似要素(before,after)を利用すると良いです。擬似要素を使う場合は擬似要素にbox-sizing: border-boxをセットしpaddingやborderも要素内におさめるようにしましょう。

CSSはこちら

「波紋ボタン」は画像バナーの上にほんのり乗っけてもステキですね！レインボーっぽいボタンはtext-shadowを重ねて作ってます。こちらも影足をボカさず、文字から距離をおくことで面白い効果が生まれます。

CSSはこちら

「ブロックっぽいボタン」は視認性が低いので個人的にオススメはしません。「立体的なボタン」は文言を出し分けてるので、他のものとタグが入れ子になっています。

「背景がアニメーションするボタン」は背景のgradientを斜めに入れてボカしなしで二色設定することでツートーンを実現しています。

[code title=”html”]<span class=”_3d”><span><i class=”fa fa-envelope”></i>CLICK ME </span><span><i class=”fa fa-envelope”></i>CONTACT</span></span>[/code]

CSSはこちら

おまけ：文字間に気をつけよう

ボタンは文字も目立たせるために影をつけたり、ボールドをかけたりと文字を太らせることが多いと思います。文字が太ると文字間がキツくなりますので、デザインに応じてletter-spacingで.1~.3em程度開けてあげると可読性も上がり○(マル)。

今回はあえて文字間を調整していないボタンもありますので悪い例として見ておいてください笑

まとめ

すぐに使えそうなボタンデザインを集めてみましたが、いかがでしょうか？サイト制作の参考にしてください。