CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！

/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

すべてのボタンデザインに共通しているわけではありません。

不必要なものは消してください。

また、aタグかbuttonタグかなど、使うHTMLタグによってCSSを調節する必要があります。もし崩れたといった場合は、HTMLタグに当たっているCSSを確認するようにしてください。

box-sizingはborder-boxが一般化しているので書いています。

本ページで紹介するCSSボタンはフォントサイズを基準とするem、rem基準で作っています。

pxを使っていると各サイズ固定になるため、pxで指定している箇所をすべて変更する必要がありますが、em、remを使っているとそのような心配がありません。

もちろん、デザインや制作物によってはpxベースで作ったほうがいい場合もあるので、あくまで制作物に合わせるようにしてください。

汎用的に使えるように書かれているので、少しコードが冗長になったり、セレクタが多かったりしますが、そのあたりは使用の際にまとめてください。

アイコンとフォント

ボタンを作る上で欠かせないのがアイコンとフォントです。アイコンについては画像で作る場合であれば、そのまま画像に含めれば良いですが、CSSで作る場合は別で用意する必要があります。

簡単に使えるものとしては、Font Awesomeというものがあります。こちらはアイコンフォントというものになり、SVGアイコンをフォント形式で使うというものになります。

本ページで紹介するボタンで使用しているアイコンもFont Awesomeを使用しています。

その他フォントについてですが、日本語で使えるWebフォントは限られています。使うテキストを限定するならフォントファイルから作るという方法もありますが、使用用途をボタンだけに限定するのであれば、そこまでする必要はなく画像で作ったほうがいいです。

電話番号や英数字であれば、Google fontを使うことでより良いデザインになります。速度を気にされる場合はWebフォント高速化をご参考ください。

前置きが長くなってしまいましたが、ボタンサンプルについて見ていきましょう。

基本的なボタン

装飾等が少ないシンプルな基本形のCSSボタンデザインです。

角丸

PUSH

HTML・CSSを見る

<a href="" class="btn btn--orange">PUSH</a>

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

ベースのCSSに色を指定しています。

角丸大

PUSH

HTML・CSSを見る

<a href="" class="btn btn--orange btn--radius">PUSH</a>

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}

border-radiusに100vhを指定しています。

角丸 / 複数行

PUSH !
ボタン

HTML・CSSを見る

<a href="" class="btn btn--orange">PUSH !<br>ボタン</a>

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

複数行にしたパータンです。

角丸大 / 複数行

PUSH！
ボタン

HTML・CSSを見る

<a href="" class="btn btn--orange">PUSH !<br>ボタン</a>

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}

複数行を角丸しています。

角丸 / 複数行 / アイコン

お電話はこちら
0120-12-3456

HTML・CSSを見る

<a href="" class="btn btn--orange"><i class="fas fa-phone-alt fa-position-left"></i>お電話はこちら<br>0120-12-3456</a>

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

.fa-position-left {
  position: absolute;
  top: calc(50% - .5em);
  left: 1rem;
}

複数行ボタンにアイコンを設置しています。縦中央に配置されるようにpositionを使っています。

角丸大 / 複数行 / アイコン

お電話はこちら
0120-12-3456

HTML・CSSを見る

<a href="" class="btn btn--orange"><i class="fas fa-phone-alt fa-position-left"></i>お電話はこちら<br>0120-12-3456</a>

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

.fa-position-left {
  position: absolute;
  top: calc(50% - .5em);
  left: 1rem;
}

.btn--radius,
a.btn--radius,
button.btn--radius
{
    border-radius: 100vh;
}

角丸を大きくしています。

基本的なborderや影を使ったボタン

CSSのborderやbox-shadowを使って作ったボタンです

なぜCSSでボタンを作るのか？

CSSボタンを作る前提

基本スタイル

アイコンとフォント

基本的なボタン

角丸

角丸大

角丸 / 複数行

角丸大 / 複数行

角丸 / 複数行 / アイコン

角丸大 / 複数行 / アイコン

基本的なborderや影を使ったボタン

立体

立体 / 影

立体 / エンボス

立体 / エンボス / アイコン

立体 / 浮き出し / アイコン

立体 / 角丸大 / アイコン

立体 / 角丸大 / 複数アイコン

枠線

二重線

くぼみ線

浮き出し線

くぼみ

浮き出し

破線

点線

線 & 立体的に

丸形のボタン

正円ボタン

正円ボタン / 立体

正円ボタン / 立体

正円ボタン / アイコン

グラデーションを使ったボタン

グラデーション基本

グラデーション / 角丸

グラデーション / 線 / 影

グラデーション / 影 / 斜め

球体風

グラデーション / 影 / 角丸

グラデーション / 線 / 角丸

グラデーション・テキスト

グラデーション・テキスト / 影

フラットなボタン

フラットなボタン基本

フラットなボタン２

フラットなボタン３

フラットなボタン４

フラットなボタン５

フラットなボタン６

立体的ボタン

グラデーションを使った立体風ボタン

線を使った立体風ボタン

金塊のようなボタン

メタリックなボタン

3Dボタン

3Dボタン：1

反転ボタン

3Dボタン：2

3Dボタン：3

主に線を使用したデザインのボタン

線でシンプルなボタン

少しアクセントを足した線ボタン

線のみのボタン

少しアクセントを足した線ボタン2

陰影をストライプにしたボタン

陰影をドットにしたボタン

陰影を縦縞にしたボタン

背景をストライプにしたボタン

背景をドットにしたボタン

傾けたボタン

影を強くしたボタン

複数線で囲ったボタン

パッチワーク風ボタン

パッチワーク風ボタン2

線が離れたボタン

線が離れたボタン / 角丸大

線が離れたボタン / 背景色

色付き影 / 角丸大

SVG線ボタン