CSSで表現できるボタンの基本パターン(※ Font Awesomeを使うものもあり)

ボタンのパターン集を作成しました。
コピペで使っていただいてOKです。

<div class="btn">ボタン</div>

上記のHTMLをCSSでカスタマイズしていきます!

はにわまん
コピペで実現可能ないろいろなボタンのパターンをまとめました!

ベースのボタン

ボタン
.btn {
  display: inline-block;
  padding: .6em 2em;
	margin: 0 0 1em;
  background-image: none;
  background-color: #4CAF50;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
}
.btn:hover,
.btn:focus {
  outline: none;
}
.btn::-moz-foucus-inner {
  padding: 0;
  border: none;
}

色々な場面を想定してボタンのCSSをリセットしているようなCSSです。(色も指定しない方が管理する上ではベストかもしれません。)

この上にCSSを乗せていきます!

アローボタン

アローボタンとは、ボタンの右側に「」や「」や「」のアイコンをつけて「ボタンであることの認知度を上げる」ことのできるボタンです。

Font Awesomeのアイコン素材を使っています。
http://fontawesome.io/

矢印

ボタン
<div class="btn btn-arrow">ボタン</div>
.btn.btn-arrow {
  padding-right: 2.5em;
}
.btn.btn-arrow::after {
  position: absolute;
  content: "\f061";
  font-family: 'FontAwesome';
  top: 50%;
  right: 4px;
  left: auto;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

三角

ボタン
<div class="btn btn-caret">ボタン</div>
.btn.btn-caret {
  padding-right: 2.5em;
}
.btn.btn-caret::after {
  position: absolute;
  content: "\f0da";
  font-family: 'FontAwesome';
  top: 50%;
  right: 4px;
  left: auto;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

「く」記号

ボタン
<div class="btn btn-angle">ボタン</div>
.btn.btn-angle {
  padding-right: 2.5em;
}
.btn.btn-angle::after {
  position: absolute;
  content: "\f0da";
  font-family: 'FontAwesome';
  top: 50%;
  right: 4px;
  left: auto;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ゴーストボタン

ゴーストボタンとは、濃い背景の中に溶け込むように設計された、背景色が透明のボタンです。

ボタン
<div class="btn btn-ghost">ボタン</div>
.btn.btn-ghost {
  color: #333;
  background: none;
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: none;
}

グラデーション

ひと昔前に流行ったグラデーション。最近は逆に「ダサい」という風潮にありますが、作り方だけはおさらいしておきましょう。

ボタン
<div class="btn btn-gradation">ボタン</div>
.btn.btn-gradation {
  background: linear-gradient(#81C784, #4CAF50);
}

立体的なボタン

ボタンは押せることを読者に認識してもらうことが大事です。立体的なボタンにすると、「押せる」と認識されやすくなります。

立体を表現する方法は、影と線の2パターンあります。

影で立体を表現

実はベースのボタンも影をつけていますが、もっとハッキリとした影をつけてみましょう。

ボタン
<div class="btn btn-shadow">ボタン</div>
.btn.btn-shadow {
  box-shadow: 2px 2px 3px 0 #333;
}

box-shadowの使い方については、以下にまとめています。
影を操れ!box-shadowの使い方を分かりやすく解説します

線で立体を表現

ボタン
<div class="btn btn-border">ボタン</div>
.btn.btn-border {
  border-bottom: 3px solid #1B5E20;
  box-shadow: none;
}

ベースとなる色より、濃い色を使うといい感じになります。

濃い色を見つけるには、Syncer様の「カラーコード変換ツール」がとても便利です。
https://syncer.jp/color-converter

角を丸める

角を丸めると少しポップなボタンになります。

ボタン
<div class="btn btn-radius">ボタン</div>
.btn.btn-radius {
  border-radius: 8px;
}

マウスオーバー時の動き

マウスオーバーした時の動きでサイトに個性が生まれます。

透過

多くのサイトでよく使われています。

ボタン
<div class="btn btn-opacity">ボタン</div>
.btn.btn-opacity:hover {
  opacity: .6;
}

opacityは透明度を表現するCSSで、0~1の間で表現します。0に近づくほど透明になります。

拡大

ボタン
<div class="btn btn-zoom">ボタン</div>
.btn.btn-zoom:hover {
  transform: scale(1.2, 1.2);
}

幅、高さを1.2倍しています

浮かぶ

ボタン
<div class="btn btn-float">ボタン</div>
.btn.btn-float:hover {
	transform: translate(0, -10px);
	box-shadow: 5px 5px 3px 0 rgba(0,0,0,.2);
}

ボタン自体は上に移動しているだけですが、影の効果を使って浮かび上がっているように表現しています。

おわり


ボタンのデザインをまとめました。今後も追加し続けていきます。

気になるボタンがあったら使ってみてください!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事