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

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

CSS

利用シーン例
HTML・CSSだけでボタンを作りたい場合
CSSで作れるボタンデザイン

CSS逆引きレシピ

このページの情報で解決しなかったら
検索してみましょう

CSS逆引き検索

主な使用プロパティ:

CSSで作れるボタンについて120個以上サンプルを作成してみました。

CSSで作れるボタンデザイン
どこよりも詳しく、どこよりもサンプル多く解説しています。(おそらく..)

どれもHTMLとCSSで実現できるものであり、PC向けボタンはすべてホバーアクション付きです。

また、CSSボタンデザインの作り方はもちろん、Webでボタンを作る際の重要なポイントについても解説しています。
おもしろいボタンから実用的なボタンなどもあります。

各コードはコピペしてご自由に使っていただいて構いません。

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

その前に、なぜCSSでボタンを作るのか?について少しだけ考えたいと思います。

簡単に言ってしまえば、 軽い!拡張性がある!解像度の心配がない!簡単!と言った理由ではないでしょうか?

画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。

もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。

特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンであればそういった面倒な手間はかかりません。

CSSボタンを作る前提

CSSボタンを作る前に、HTMLとCSSの基本について軽くおさらいをしたいと思います。

基本スタイル

まずは以下、ベースとなるCSSを書いてください。

/*まずはお決まりのボックスサイズ算出を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

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

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

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

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

基本的なボタン

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

角丸

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に色を指定しています。


角丸大

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を指定しています。


角丸 / 複数行

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

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


角丸大 / 複数行

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

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


角丸 / 複数行 / アイコン

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を使っています。


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

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を使って作ったボタンです

立体

HTML・CSSを見る
<a href="" class="btn btn--yellow btn--cubic">PUSH!</a>
a.btn--yellow {
  color: #000;
  background-color: #fff100;
  border-bottom: 5px solid #ccc100;
}

a.btn--yellow:hover {
  margin-top: 3px;
  color: #000;
  background: # fff20a;
  border-bottom: 2px solid #ccc100;
}

ボタンに立体感を出しています。立体感を出す方法としては主にborder-bottomで下線を指定するか、box-shadowで影を付けるか、背景を重ねるか、などの方法があります。それぞれ向き不向きがあり、ホバー時に挙動を付ける場合は、プロパティの指定の方法にも若干違いがあるので注意が必要です。


立体 / 影

HTML・CSSを見る
<a href="" class="btn btn--orange btn--cubic btn--shadow">PUSH!</a>
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  border-bottom: 5px solid #b84c00;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

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


立体 / エンボス

HTML・CSSを見る

文字外側の左上から明るめな影をつけることで文字が凹んでいるように見えます。


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

HTML・CSSを見る
<a href="" class="btn btn--green btn--emboss btn--cubic">PUSH!<i class="fas fa-angle-right fa-position-right"></i></a>
a.btn--green.btn--emboss {
  color: #00662d;
  text-shadow: -1px -1px 1px #00ff71;
  border-bottom: 5px solid #00662d;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #00662d;
}

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

エンボスにアイコンを足したものです。アイコンフォントにもエンボスが効いているのが分かります。


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

HTML・CSSを見る
<a href="" class="btn btn--pink btn--raised btn--cubic">PUSH!<i class="fas fa-angle-right fa-position-right"></i></a>
/*共通部分は省略*/

a.btn--raised {
    color: #eb6877;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, .44), 1px 1px 1px #4a0a11;
}

左上から明るめの影、右下に暗めの影で文字が浮き出ているような表現になります。


立体 / 角丸大 / アイコン

HTML・CSSを見る
<a href="" class="btn btn--red btn--radius btn--cubic">PUSH!<i class="fas fa-angle-right fa-position-right"></i></a>
/*主な共通部分は省略*/

a.btn--red.btn--cubic {
  border-bottom: 5px solid #9f000c;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #9f000c;
}

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

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

立体的ボタンの角丸を大きくします。


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

HTML・CSSを見る
<a href="" class="btn btn--purple btn--radius btn--cubic"><i class="fas fa-angle-double-right fa-position-left"></i>PUSH<i class="fas fa-angle-double-left fa-position-right"></i></a>
/*主な共通部分は省略*/

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

アイコンを左側と右側に設置しています。文字の前後にアイコンをつける場合は、疑似クラスを使うことで実現できます。


枠線

HTML・CSSを見る
<a href="" class="btn btn--orange btn--border-solid">PUSH!</a>
/*主な共通部分は省略*/

a.btn--orange.btn--border-solid {
  border: 2px solid #b84c00;
}

borderのsolidで枠線を付けています。


二重線

HTML・CSSを見る
<a href="" class="btn btn--blue btn--border-double">PUSH!</a>
/*主な共通部分は省略*/

a.btn--blue.btn--border-double {
  border: 8px double #0090bb;
}

borderのdoubleで二重線をつけています。


くぼみ線

HTML・CSSを見る
<a href="" class="btn btn--green btn--border-groove">PUSH!</a>
/*主な共通部分は省略*/

a.btn--green.btn--border-groove {
  border: 6px groove #008039;
}

borderのgrooveでくぼんだ線をつけています。


浮き出し線

HTML・CSSを見る
<a href="" class="btn btn--pink btn--border-ridge">PUSH!</a>
/*主な共通部分は省略*/

a.btn--pink.btn--border-ridge {
  border: 6px ridge #e53b4e;
}

borderのridgeで浮き出した線をつけています。


くぼみ

HTML・CSSを見る
<a href="" class="btn btn--red btn--border-inset">PUSH!</a>
/*主な共通部分は省略*/

a.btn--red.btn--border-inset {
  border: 6px inset #b9000e;
}

borderのinsetでくぼみをつけています。


浮き出し

HTML・CSSを見る
<a href="" class="btn btn--red btn--border-outset">PUSH!</a>
/*主な共通部分は省略*/

a.btn--red.btn--border-outset {
  border: 6px outset #b9000e;
}

borderのoutsetで浮き出し表現をつけています。


破線

HTML・CSSを見る
a href="" class="btn btn--yellow btn--border-dashed">PUSH!</a>
/*主な共通部分は省略*/

a.btn--yellow.btn--border-dashed {
  border: 2px dashed #000;
}

borderのdashedで破線をつけています。


点線

HTML・CSSを見る
a href="" class="btn btn--yellow btn--border-dotted">PUSH!</a>
/*主な共通部分は省略*/

a.btn--yellow.btn--border-dotted {
  border: 3px dotted #000;
}

borderのdottedで点線をつけています。


線 & 立体的に

HTML・CSSを見る

これまでの要素を組み合わせてみました。ホバーとクリックでアクションがあります。

丸形のボタン

丸形のボタンデザインのサンプルです

正円ボタン

HTML・CSSを見る
<a href="" class="btn btn--orange btn--circle btn--circle-a btn--shadow">PUSH!</a>
/*主な共通部分は省略*/

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

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

a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

a.btn--circle {
  border-radius: 50%;
  line-height: 100px;
  width: 100px;
  height: 100px;
  padding: 0;
}

border-raisu: 50%;で正円を作っています。


正円ボタン / 立体

HTML・CSSを見る
<a href="" class="btn btn--yellow btn--circle">PUSH!</a>
/*色や主な共通部分は省略*/

a.btn--circle {
  border-radius: 50%;
  line-height: 100px;
  width: 100px;
  height: 100px;
  padding: 0;
  -webkit-box-shadow: 0 5px 0 #e6d900;
  box-shadow: 0 5px 0 #e6d900;
}

a.btn--circle:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #e6d900;
  box-shadow: 0 2px 0 #e6d900;
}

正円ボタンを立体風にしています。border-bottomだとあまり立体感が作れません。サンプルだとbox-shadowです。もっと立体感を出したい場合は擬似クラスなどを使ったほうがいいと思います。


正円ボタン / 立体

HTML・CSSを見る

このサイトのお問い合わせボタンみたいなやつです。


正円ボタン / アイコン

HTML・CSSを見る
<a href="" class="btn btn--circle btn--circle-c btn--shadow"><i class="fas fa-arrow-up"></i></a>
/*主な共通部分は省略*/

a.btn--circle {
  width: 60px;
  height: 60px;
  padding: 0;
  background: #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

a.btn--circle i {
  font-size: 150%;
  line-height: 60px;
  -webkit-transition: all .3s;
  transition: all .3s;
  letter-spacing: 0;
}
a.btn--circle:hover i {
  line-height: 55px;
}

ページトップへ戻るボタンなどでよく見ますね。アイコンのみのシンプルなボタンです。

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

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

グラデーション基本

HTML・CSSを見る

CSSのlinear-gradientを使ってグラデーションをかけています。サンプルのようにホバー時にスムーズに背景を切り替えたい場合は、擬似クラスなどで別のグラデーションを重ね、ホバー時に消していくといったことが必要です。


グラデーション / 角丸

HTML・CSSを見る
<a href="" class="btn btn-gradient"><span>PUSH!</span></a>
/*基本と主な共通部分は省略*/

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

角丸をつけたパターンです。


グラデーション / 線 / 影

HTML・CSSを見る
<a href="" class="btn btn-gradient"><span>PUSH!</span></a>
/*基本と主な共通部分は省略*/

a.btn-gradient {
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

a.btn-gradient:hover {
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
  color: #fff;
  -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
  box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
}

線と影をつけたパターンです。ホバー時にふわっと浮くような感じにしてみました。


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

HTML・CSSを見る
<a href="" class="btn btn-gradient"><span>PUSH!</span></a>
/*基本と主な共通部分は省略*/

a.btn-gradient {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

a.btn-gradient:hover {
  -webkit-transform: skew(0);
  transform: skew(0);
  color: #fff;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}

CSSのtransform: skewでボタン全体を傾けています。斜めにするのとグラデーションは関係ありませんが、スタイリッシュなサイトにいいかもしれません。


球体風

HTML・CSSを見る

正円にグラデーションと内影を付けることで球体のようなボタンを表現しています。マーブルチョコみたいですね。


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

HTML・CSSを見る
<a href="" class="btn btn-radius-solid btn--shadow">PUSH!<i class="fas fa-angle-right fa-position-right"></i></a>
/*その他と主な共通部分は省略*/

a.btn-radius-solid {
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
}

a.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(bottom, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to top, #f1e767 0%, #feb645 100%);
}

よくある基本的なボタンです。
ホバー時の変化をスムーズにしたい場合は、疑似クラスで背景を重ねるかCSSアニメーションなどが必要です。


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

HTML・CSSを見る
<a href="" class="btn btn-radius-solid">PUSH!<i class="fas fa-angle-right fa-position-right"></i></a>
/*その他と主な共通部分は省略*/

a.btn-radius-solid {
  border: 1px solid #ccc;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
}

a.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

こちらもよくある基本的なボタンですね。
古いサイトだとこういったボタンが画像で作られていることがありますが、今ではCSSで簡単に作れます。CSSで作ることでとても軽く拡張性も高くなります。


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

HTML・CSSを見る

テキストにも
background-clip: text;でグラデーションをかけています。


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

HTML・CSSを見る
<a href="" class="btn btn-gradient"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-gradient {
  font-size: 2rem;
  color: #fff;
  border-radius: 100vh;
  background-image: -webkit-linear-gradient(110deg, #e9defa 0%, #fbfcdb 100%);
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

a.btn-gradient span {
  background-image: -webkit-gradient(linear, left top, right top, from(#93a5cf), to(#e4efe9));
  background-image: -webkit-linear-gradient(left, #93a5cf 0%, #e4efe9 100%);
  background-image: linear-gradient(to right, #93a5cf 0%, #e4efe9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a.btn-gradient:hover {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

淡いグラデーションに影を足してやわらかな質感を表現しています。

フラットなボタン

borderやグラデーションを工夫して少し立体的に見えるボタンのサンプルです。

フラットなボタン基本

HTML・CSSを見る

ホバー時に左下のアクセントが拡大して背景になるパターンです。


フラットなボタン2

HTML・CSSを見る
<a href="" class="btn btn-flat"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 30px;
  width: 150%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
  transform: translateX(-98%) translateY(-70%) rotate(135deg);
  background: #fff100;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
  transform: translateX(-9%) translateY(-25%) rotate(135deg);
}

ホバー時に右上のアクセントが拡大して背景色が入れ替わるパターンです。


フラットなボタン3

HTML・CSSを見る
<a href="" class="btn btn-flat"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #eb6877;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

ホバー時に左のアクセントが拡大して背景になるパターンです。


フラットなボタン4

HTML・CSSを見る
<a href="" class="btn btn-flat"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-flat {
  overflow: hidden;

  padding: 1.5rem 6rem;

  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;

  width: 100px;
  height: 100px;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-80%) translateY(-25px);
  transform: translateX(-80%) translateY(-25px);

  border-radius: 50%;
  background: #eb6100;
}

a.btn-flat:hover:before {
  width: 400px;
  height: 400px;

  -webkit-transform: translateX(-1%) translateY(-175px);

  transform: translateX(-1%) translateY(-175px);
}

ホバー時に左の丸形のアクセントが拡大して背景になるパターンです。


フラットなボタン5

HTML・CSSを見る
<a href="" class="btn btn-flat"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-flat {
  overflow: hidden;

  padding: 1.5rem 6rem;

  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
  z-index: 1;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

a.btn-flat:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}

ホバー時に左の端のアクセントが拡大して背景になるパターンです。


フラットなボタン6

HTML・CSSを見る
<a href="" class="btn btn-flat"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-flat {
  overflow: hidden;

  padding: 1.5rem 6rem;

  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
  z-index: 1;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: calc(-100% + 10px);

  width: 100%;
  height: 100%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);

  background: #094;
}

a.btn-flat:after {
  position: absolute;
  top: 0;
  right: calc(-100% + 10px);

  width: 100%;
  height: 100%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);

  background: #094;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(50%) translateY(0);
  transform: translateX(50%) translateY(0);
}

a.btn-flat:hover:after {
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

ホバー時に両端のアクセントが拡大して背景になるパターンです。

立体的ボタン

borderやグラデーションを工夫して少し立体的に見えるボタンのサンプルです。

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

HTML・CSSを見る

背景となる要素にグラデーションをかけ、その上に要素を重ねることで少し立体的なボタンのようなイメージになります。


線を使った立体風ボタン

HTML・CSSを見る
<a href="" class="btn btn-solid"><span>PUSH!</span></a>
/*その他と主な共通部分は省略*/

a.btn-solid {
  color: #fff;
  border-top: 4px solid #48ecc4;
  border-right: 4px solid #0a5f4a;
  border-bottom: 4px solid #0f745b;
  border-left: 4px solid #8cf9de;
  border-radius: 0;
  background: #11a37f;
}

a.btn-solid:hover {
  color: #fff;
  border-top: 4px solid #0f745b;
  border-right: 4px solid #8cf9de;
  border-bottom: 4px solid #48ecc4;
  border-left: 4px solid #0a5f4a;
}

上下左右でそれぞれ異なる色のborderを指定することで、立体的に見えるボタンになります。borderのinsetやoutsetでも似たような表現を作れますが、こちらの方法の方ではより細かく色が指定できるため、立体の深みを細かく調整することができます。


金塊のようなボタン

HTML・CSSを見る
<a href="" class="btn btn-solid-gold">GOLD</a>
/*その他と主な共通部分は省略*/

a.btn-solid-gold {
  color: #b1921b;
  border-right: 4px solid #cea82c;
  border-bottom: 10px solid #987c1e;
  border-left: 4px solid #ffed8b;
  border-radius: 0;
  background: -webkit-gradient(linear, right top, left top, from(#ffd75b), color-stop(30%, #fff5a0), color-stop(40%, #fffabe), color-stop(50%, #ffffdb), color-stop(70%, #fff5a0), to(#fdd456));
  background: -webkit-linear-gradient(right, #ffd75b 0%, #fff5a0 30%, #fffabe 40%, #ffffdb 50%, #fff5a0 70%, #fdd456 100%);
  background: linear-gradient(-90deg, #ffd75b 0%, #fff5a0 30%, #fffabe 40%, #ffffdb 50%, #fff5a0 70%, #fdd456 100%);
  text-shadow: -1px -1px 1px #ffffd9;
}

a.btn-solid-gold:hover {
  margin-top: 3px;

  color: #b1921b;
  border-right: 4px solid #cea82c;
  border-bottom: 7px solid #987c1e;
  border-left: 4px solid #ffed8b;
}

グラデーションとborderを使って金塊のようなボタンにしています。
もっと細かくグラーデションや影を使えばよりリアルな金塊を作成できます。


メタリックなボタン

HTML・CSSを見る
<a href="" class="btn btn-solid-silver">SILVER</a>
/*その他と主な共通部分は省略*/

a.btn-solid-silver {
  color: #000;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}

a.btn-solid-silver:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}

金属的なボタンです。

3Dボタン

3Dボタンです。CSSのpreserve-3dperspectiveなどで遠近を作っています。

3D表現を覚えるとのっぺらとしたWebに奥行きの表現を加えることができます。このwebサイトでも3D表現を使っています。(PC画面で右上のハンバーガーメニューをクリックしてみてください。)

しかし、ボタンの役割とは押してもらうことにあり、ボタンを3Dで表現することでどれだけコンバージョンが上がるのか?と言えば、あまり効果はないのではないでしょうか。むしろデザインや挙動によっては、ユーザーにボタンと認識してもらいにくい場合もあります。
3Dボタンを作るのに労力を割くよりも、その他の作り込みに時間をかけたほうが良いかもしれません。

3Dボタン:1

HTML・CSSを見る

簡単な3Dのボタンです。ボタンや文字に遠近感があるのが分かります。※IE対応する場合は工夫が必要です。


反転ボタン

HTML・CSSを見る

マウスオーバーしないとわからないですが、要素が回転します。ただ回転するだけなので3D感は薄いです。


3Dボタン:2

HTML・CSSを見る

こちらもマウスオーバーしないとわからないですが、ホバーで側面が表示されます。基本的にやっていることは他と同じです。3Dを作ることで立体を形成できます。このWebサイトのトップページのローディングにも同じ方法を使っています。


3Dボタン:3

HTML・CSSを見る

マウスオーバーすると横方向に回転します。

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

線を主にしたシンプルなボタンです。実際に使用する際には、PCではホバーアクションは必ず付けたほうがいいでしょう。さらには色やアイコンをつけてボタンだとわかりやすいものにしましょう。

線でシンプルなボタン

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*主な共通部分は省略*/

a.btn-border {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
}

a.btn-border:hover {
  color: #fff;
  background: #000;
}

シンプルな線のみのボタンです。実際に使用する際にはアイコンを足すなどしましょう。


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

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*その他と主な共通部分は省略*/

a.btn-border {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

a.btn-border:before {
  position: absolute;
  top: 0;
  left: 0;

  width: 5px;
  height: 100%;

  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;

  background: #000;
}

a.btn-border:hover {
  color: #fff;
  background: #000;
}

a.btn-border:hover:before {
  background: #fff;
}

少しアクセントを足したボタンです。デザイン次第ではタグや付箋のようにも見えます。


線のみのボタン

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*その他と主な共通部分は省略*/

a.btn-border {
  border-radius: 0;
}

a.btn-border:before,
a.btn-border:after {
  position: absolute;

  width: 100%;
  height: 2px;

  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;

  background: #000;
}

a.btn-border:before {
  top: 0;
  left: 0;
}

a.btn-border:after {
  right: 0;
  bottom: 0;
}

a.btn-border:hover:before,
a.btn-border:hover:after {
  width: 0;
}

シンプルでホバーがおしゃれではありますが、このままではボタンと認識されにくいので、矢印を付けたり、上下にテキストを配置するなどして、押せるボタンだと認識できるようにする必要があります。


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

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*その他と主な共通部分は省略*/


a.btn-border {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

a.btn-border:before {
  position: absolute;
  top: 0;
  left: 0;

  width: 15px;
  height: 100%;

  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);

  border-radius: 0 50% 50% 0;
  background: #000;
}

a.btn-border:hover:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  line-height: 30px;

  width: 30px;
  height: 30px;

  content: '\f061';
  -webkit-transform: translateX(460%) translateY(.5rem);
  transform: translateX(460%) translateY(.5rem);

  color: #fff;
  border-radius: 50%;
}

線である必要はないですが、ホバー時に線が変異するなどのアクセントが付いています。


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

HTML・CSSを見る

陰影となる箇所をボーダー線にしたボタンです。ホバー時とクリック時にアクションがあります。


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

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>

a.btn-border {
  border: 2px solid #000;
  border-top: 1px solid #000;
  border-radius: 0 0 .5rem .5rem;
  background-color: #fff;
  background-image: -webkit-radial-gradient(#000 15%, transparent 20%),
  -webkit-radial-gradient(#000 15%, transparent 20%);
  background-image: radial-gradient(#000 15%, transparent 20%),
  radial-gradient(#000 15%, transparent 20%);
  background-position: 0 0, 3px 3px;
  background-size: 6px 6px;
}

陰影となる箇所をドットにしたボタンです。ブラウザによってはドットがちゃんと表示されていないかもしれません。(詳しく見ていません..)


陰影を縦縞にしたボタン

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*陰影をストライプにしたボタンとの差分*/
a.btn-border {
  border: 2px solid #000;
  border-top: 1px solid #000;
  border-radius: 0 0 .5rem .5rem;
  background: -webkit-repeating-linear-gradient(left, #000, #000 1px,
    transparent 2px, transparent 6px);
  background: repeating-linear-gradient(to right, #000, #000 1px,
    transparent 2px, transparent 6px);
  background-size: 12px 12px;
}

陰影となる箇所を縦縞にしたボタンです。


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

HTML・CSSを見る

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


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

HTML・CSSを見る

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


傾けたボタン

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*主な共通部分は省略*/

a.btn-border {
  padding: 1.5rem 4rem;

  -webkit-transform: skew(-15deg);

  transform: skew(-15deg);

  color: #fff;
  border: 3px solid #000;
  border-radius: 0;
  background: #555;
}

a.btn-border:hover:before {
  top: -3px;

  background: #000;
}

a.btn-border:hover:after {
  bottom: -3px;

  background: #000;
}

a.btn-border:hover {
  -webkit-transform: skew(-5deg);
  transform: skew(-5deg);

  color: #fff;
}

傾けたボタンです。


影を強くしたボタン

HTML・CSSを見る
<a href="" class="btn btn-border">PUSH!</a>
/*主な共通部分は省略*/

a.btn-border {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
  -webkit-box-shadow: 4px 4px 0 #000;
  box-shadow: 4px 4px 0 #000;
}

a.btn-border:hover {
  -webkit-box-shadow: -4px -4px 0 #000;
  box-shadow: -4px -4px 0 #000;
}

box-shadowで影のサイズを0にして、距離のみを指定することでこのようなボタンになります。


複数線で囲ったボタン

HTML・CSSを見る
<a class="btn btn-border"><span>PUSH!</span></a>
/*主な共通部分は省略*/

a.btn-border {
  border: 3px solid #000;
  border-radius: 0;
  background: #fff;
}

a.btn-border:before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  border: 1px solid #000;
}

a.btn-border:hover:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

疑似クラスにもborderを付けてことなる幅の二重線を表現しています。


パッチワーク風ボタン

HTML・CSSを見る
<a class="btn btn-border"><span>PUSH!</span></a>
/*主な共通部分は省略*/

a.btn-border {
  padding: 1.5rem 4rem;
  border: 3px solid #000;
  border-radius: 0;
  border-radius: 100vh;
  background: #fff;
}

a.btn-border:before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  border: 3px dotted #000;
  border-radius: 100vh;
}

a.btn-border:hover:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

パッチワーク?で合ってますかね?刺繍したような印象のボタンです。


パッチワーク風ボタン2

HTML・CSSを見る
<a class="btn btn-border"><span>PUSH!</span></a>
/*主な共通部分は省略*/


a.btn-border {
  padding: 1.5rem 4rem;
  border: 3px solid #000;
  border-radius: 0;
  background: #fff;
}

a.btn-border:before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;

  border-top: 3px dotted #000;
}

a.btn-border:after {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  border-top: 3px dotted #000;
}

a.btn-border:hover:before {
  top: -3px;
  background: #000;
}

a.btn-border:hover:after {
  bottom: -3px;
  background: #000;
}

ホバーアクションでは上下の線を点線から実線に変化させ、位置を移動させています。


線が離れたボタン

HTML・CSSを見る

背景色を変えました。線とボタンが離れているような表現になっています。


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

HTML・CSSを見る

角丸を強くしたパターンです。


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

HTML・CSSを見る

背景色を黄色にして線を黒くしたパターンです。黒と黄色は相性が抜群ですね。


色付き影 / 角丸大

HTML・CSSを見る

影を色付きにしたパターンです。線がメインのボタンデザインの場合、このように影に色をつけるとデザイン性が良いです。


SVG線ボタン

HTML・CSSを見る

SVGはHTMLでもCSSでも実装できるのでとても便利です。
SVGを使うことで、画像を使わずに軽量でリッチな表現ができるようになります。

線とグラデーションを使用したデザインのボタン

線とテキストにグラデーションをかけています。ボタンの線が明るい色の場合は、背景色が濃い色でないと分かりづらいです。

グラデーション線

HTML・CSSを見る

線にグラデーションが付いているのが分かります。実際には線自体にグラーデションをかけているわけではなく、中の要素に背景色を付けているだけになります。


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

HTML・CSSを見る
<a href="" class="btn btn-border-shadow btn-border-shadow--radius">PUSH!</a>
/*主な共通部分は省略*/

.btn-text-gradient {
  background: -webkit-gradient(linear, right top, left top, from(yellow), to(green));
  background: -webkit-linear-gradient(right, yellow, green);
  background: linear-gradient(to left, yellow, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

今度はテキストにもグラデーションがかかっているのが分かるかと思います。
テキストへのグラデーションは
background-clip: text;で実現させています。


ゴールドで高級感あるボタン

HTML・CSSを見る

作っていてイメージが湧いたのがRIZAPさんでした。borderとテキストをゴールドにして、対比に黒を使うことで、高級感がでます。


メタリックなボタン

HTML・CSSを見る

背景まで金属感あるものにすると、高級感がでません。
サンプルのように背景色と対比させると高級感が出ますね。後はボタンと認識してもらえる工夫が必要です。

異型な形のボタン

線とテキストにグラデーションをかけています。ボタンの線が明るい色の場合は、背景色が濃い色でないと分かりづらいです。

いびつな形のボタン

HTML・CSSを見る

svgを使えば自由なあらゆる表現ができますがいかんせん面倒ですよね。簡単ないびつな形のボタンであればborder-radiusを工夫することでサンプルのようないびつな形のボタンが作れます。


いびつな形のボタン2

HTML・CSSを見る

パステルカラーのグラデーションを付けてみました。ふわふわ動くようなアニメーションを付けるとやわらかい印象で良さそうです。

クーポン券のようなデザイン

クーポン券をイメージしたCSSボタンデザインを作成してみました。実際に使えるシチュエーションは限られるかと思います。参考程度にしていただければ幸いです。

クーポン券ボタン1

HTML・CSSを見る

切り取り線をイメージしたクーポン券デザインです。10%OFF!の部分には「Roboto」というフォントを使っています。ハサミはFontAwesomeです。webフォントを使うことでより1段魅力的なデザインになります。


クーポン券ボタン2

HTML・CSSを見る

今度も切り離すイメージのクーポン券です。マウスオーバーで切り取り線で折りたたむような表現をしています。


クーポン券ボタン3

HTML・CSSを見る

こちらのボタンも切り取り線で切るイメージです。
本来、切るという行為は紙で行うものであり、Webで使うデザインとしては古臭い印象ですね。若年層には響かないデザインかもしれません。


クーポン券ボタン4

HTML・CSSを見る

両サイドが丸く欠けているようなボタンになります。実際にかけているわけではなく、擬似クラスで背景色と同色の丸形オブジェクトを乗せているだけです。SVGを使ったほうがいいかもしれません。

グラデーションや影を使ってリッチに表現したボタン

実際にありそうなボタンをCSSで作ってみました。
実際こういったボタンまでCSSで作る必要があるか?と言われたら制作物次第ですが、グラーデションの扱いなどに慣れると案外簡単に作ることができます。
画像で作ると修正の手間が大きく、かつ、ホバー・クリック時などで動きの表現ができません。使うシチューエーションは限られますし、クリックできることも分かりづらいので実際に使うことはかなり少ないと思います。

スイッチ黒

HTML・CSSを見る

クリックしてみましょう。スイッチが切り替わります。切り替えの表現はinputタグのcheckboxを使って切り替えを表現しています。こちらのCodePenを参考にさせていただきました。


スイッチ赤 ON OFF

HTML・CSSを見る

先ほどのボタンをアレンジしてみました。ONにすると光ったような表現になります。


スイッチボタン / フラット

HTML・CSSを見る

すみません。こちらはグラデーションは使ってません。。次に紹介するボタンとの対比のためにここで紹介しました。制作物によりますが、フラットデザインのほうが色んなシーンで使えると思います。


スイッチボタン / リアル

HTML・CSSを見る

先程のボタンをリアルにしてみました。なんか自爆スイッチみたいなものに使えそうですね。そういう遊び要素があるWebサイトで使うとおもしろそうです。ホバー時とクリック時にアクションがあります。


電源ボタン / フラット

HTML・CSSを見る

電源ボタンのフラットイメージです。こちらもグラデーションは使っていませんが、次のボタンとの対比です。ちなみにアイコン部分についてはアイコンフォントです。


電源ボタン / リアル

HTML・CSSを見る

先程のボタンをリアルな金属っぽくしてみました。ちょっと作り込みが粗いですが..。


車のエンジンスタート・ストップボタン

HTML・CSSを見る

車に乗られる方ならおなじみのボタンですね。車系のWebサイトに使ったら面白いかもしれません。


リアルな質感のボタン

HTML・CSSを見る

影を使って背景に埋め込まれているかのような質感のボタンです。

実用的なボタン

これまでCSSボタンのデザイン例を紹介してきました。少し編集すればそのまま使用できるものばかりですが、そのまますぐ使えるというわけではありません。
次に実用的ですぐ使えそうなCSSのボタンサンプルについて紹介していきたいと思います。

お問い合わせボタン

HTML・CSSを見る
<a href="" class="btn btn--orange btn-c"><i class="fa far fa-envelope"></i>お問い合わせはこちら
</a>
/*その他主な共通部分は省略*/

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

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

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

通常のお問い合わせボタンです。アイコンの位置を細かく変える場合はpositionなどを使います。


お問い合わせボタン2

HTML・CSSを見る
<a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら
</a>
/*その他と主な共通部分は省略*/

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

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

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

矢印アイコンを足したデザインです。


お問い合わせボタン3

HTML・CSSを見る
<a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら
</a>
/*その他と主な共通部分は省略*/

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

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

a.btn-c {
  font-size: 1.8rem;
  position: relative;
  padding: 1.5rem 2rem 1.5rem 2rem;
  border-radius: 100vh;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

角丸を大きくしたデザインです。


お問い合わせボタン4

HTML・CSSを見る
<a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら
</a>
/*その他と主な共通部分は省略*/

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

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

a.btn-c {
  font-size: 1.8rem;
  position: relative;
  padding: 1.5rem 2rem 1.5rem 2rem;
  border-radius: 100vh;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

角丸を大きくしたデザインに矢印アイコンを足したデザインです。


立体風お問い合わせボタン

HTML・CSSを見る
<a href="" class="btn btn-c btn--green btn--cubic"><i class="fa fas fa-envelope"></i>お問い合わせはこちら
</a>
/*その他と主な共通部分は省略*/

a.btn--green {
  color: #fff;
  background-color: #094;
}

a.btn--green:hover {
  color: #fff;
  background: #00a349;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #00662d;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #00662d;
}

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

立体風にしたデザインです。


立体風お問い合わせボタン2

HTML・CSSを見る
<a href="" class="btn btn-c btn--green btn--cubic"><i class="fa fas fa-envelope"></i>お問い合わせはこちら
</a>
/*その他と主な共通部分は省略*/

a.btn--green {
  color: #fff;
  background-color: #094;
}

a.btn--green:hover {
  color: #fff;
  background: #00a349;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #00662d;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #00662d;
}

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
  border-radius: 100vh;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

立体風+角丸を大きくしてアイコンを足したデザインです。


資料請求ボタン

HTML・CSSを見る
<a href="" class="btn btn-c btn--yellow btn--cubic"><i class="fa far fa-file-alt"></i>無料資料請求はこちら
      </a>
/*その他と主な共通部分は省略*/

a.btn--yellow {
color: #000;
  background-color: #fff100;
}

a.btn--yellow:hover {
  color: #000;
  background: #fff20a;
}

a.btn--yellow.btn--cubic {
  border-bottom: 5px solid #ccc100;
}

a.btn--yellow.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #ccc100;
}

a.btn-c {
  font-size: 1.8rem;
  position: relative;
  padding: 2rem 5rem 2rem 3rem;
  border-radius: 100vh;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

アイコンを変えることでボタンに明確な役割を持たせます。


グラデーションボタン

HTML・CSSを見る

グラーデションボタンです。作り方は前述した作り方の部分をご参考ください。


グラデーションボタン2

HTML・CSSを見る

角丸を大きくして、ホバーアクションには
transform:scaleを使ってみました。


角丸ボタン

HTML・CSSを見る
<a href="" class="btn btn--red btn-c">お申込みはこちら</a>
/*その他と主な共通部分は省略*/

a.btn--red {
  background-color: #d20010;
  border: 2px solid #9f000c;
}

a.btn-c {
  font-size: 1.8rem;
  position: relative;
  padding: 2rem 4rem 2rem 2rem;
  color: #fff;
  border-radius: 100vh;
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f30b';
}

オーソドックスな角丸ボタンです。


マイクロコピーを工夫したボタン周り

お気軽にお問い合わせください!

お問い合わせはこちら

HTML・CSSを見る
<div class="btn-copy">お気軽にお問い合わせください!</div>
<a href="" class="btn btn-c btn--yellow btn--cubic">お問い合わせはこちら</a>
/*その他と主な共通部分は省略*/

.btn-copy {
  font-size: 1.5rem;
  font-weight: bold;

  position: relative;

  margin-bottom: .2em;

  text-align: center;
}

.btn-copy:before {
  margin-right: 1rem;

  content: '\';
}

.btn-copy:after {
  margin-left: 1rem;

  content: '/';
}

自分でもよく使うデザイン例です。ボタンについてはボタン周りの説明が大切です。このようにマイクロコピーを工夫するだけでコンバージョンも上がります。


ラベリングを工夫したボタン周り

HTML・CSSを見る

「資料請求をする」といった文言だけのボタンだと、ボタンの役割が少し分かりづらいですよね。サンプルのように説明を足すことで、「物件の資料」「無料」ということが分かります。訴求したいポイントが多くあっても、あまりごちゃごちゃさせるとボタンだと認識しにくくなってしまうので注意です。


ラベリングを工夫したボタン周り2

HTML・CSSを見る

マイクロコピーを少し強調したパターンです。


ラベリングを工夫したボタン周り3

HTML・CSSを見る

マイクロコピーを吹き出し風にしたボタンです。


ラベリングを工夫したボタン周り4

HTML・CSSを見る

重要なテキストは色を変えるなどして工夫します。矢印をつけなくても指アイコンをつけることで押せるボタンだということがわかります。


ラベリングを工夫したボタン周り5

HTML・CSSを見る

吹き出しのようなものを追加したことで登録が30秒でできることが分かりますね。


速度感のあるボタン

HTML・CSSを見る

傾けたり、サンプルのように線を入れることでスピード感を感じられるボタンになります。


一般的なボタン

HTML・CSSを見る
<a href="" class="btn btn-c">ネットで無料審査依頼<i class="fas fa-arrow-circle-right fa-position-right"></i></a>
/*その他と主な共通部分は省略*/

a.btn-c {
  border: 1px solid #1b7e40;
  border-radius: 1rem;
  background: #1b7e40;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #1b7e40), to(#20b958));
  background: -webkit-linear-gradient(bottom, #1b7e40 50%, #20b958 100%);
  background: linear-gradient(0deg, #1b7e40 50%, #20b958 100%);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
}

昔からよくあるグラデーションとborder、shadowで加工されたボタンです。


スマホ用のボタン / 2カラム

HTML・CSSを見る

スマホでは電話することをボタンタップで行えるので電話ボタンを設置した例です。


スマホ用のボタン2 / 2カラム

HTML・CSSを見る
<div class="btn-wrap btn-wrap-pc-sp">
  <a href="" class="btn btn-pc-sp btn-pc-sp--contact">
    お問い合せは<br>こちら
    <i class="fas fa-angle-right fa-position-right"></i>
  </a>
  <a href="" class="btn btn-pc-sp btn-pc-sp--tel">
    お電話はこちら<br>
    <span class="number">0120-12-3456</span>
    <i class="fas fa-angle-right fa-position-right"></i>
  </a>
</div>
/*その他と主な共通部分は省略*/
a.btn-pc-sp .number {
  font-size: 1.3rem;
  letter-spacing: .05em;
}

電話ボタンに番号を書いておくことでコンバージョン率を上げることができる場合があります。理由としては必ずしも閲覧しているユーザーがその端末で電話をするとは限らないからです。

調べたのは自分だけど電話をする行為は他の人に任せる、とかよくありますよね。


スマホ用のボタン3 / 2カラム

HTML・CSSを見る

ボタンを立体的にしたパターンです。スマホではホバーというものがないので、ホバーアクションは基本必要ありません。サービスによっては押した時のアクションがあるといいかもしれません。


スマホ用のボタン4 / 2カラム

HTML・CSSを見る

スマホでは幅の制限あるので、文字数には気をつけましょう。
レスポンシブデザインなどでは画面サイズで可変となるvwでフォントサイズを指定することも多いと思います。
ただブラウザによって10px以下の表現ができなかったり、改行位置が変わってしまったりすることがあるので注意が必要です。


スマホ用のボタン5 / 2カラム

HTML・CSSを見る
<div class="btn-wrap btn-wrap-pc-sp">
  <a href="" class="btn btn-pc-sp btn-pc-sp--3 btn-pc-sp--contact">
    <i class="fas fa-envelope fa-position-left"></i>
    お問い合せ
    <i class="fas fa-angle-right fa-position-right"></i>
  </a>
  <a href="" class="btn btn-pc-sp btn-pc-sp--3 btn-pc-sp--tel">
    <i class="fas fa-phone-alt fa-position-left"></i>
    電話をする
    <i class="fas fa-angle-right fa-position-right"></i>
  </a>
</div>

アイコンを足したパターンです。


スマホ用のボタン5 / 1カラム

HTML・CSSを見る

無理して2カラムにするよりも、シンプルに1カラムで文字サイズを大きくしたほうがいいですね。


スマホ用のボタン6 / 1カラム

HTML・CSSを見る

角丸を大きくしたパターンです。


ラベル装飾ボタン

HTML・CSSを見る

「無料」という装飾を足してみたパターンです。テキストは疑似クラスで書いています。


カートに入れるボタン

HTML・CSSを見る

ショッピングカートのアイコンを使った、カートに入れるボタンです。


カートに入れるボタン2

HTML・CSSを見る
<a href="" class="btn btn-tag"><i class="fas fa-shopping-cart"></i>カートに入れる</a>
/*その他と主な共通部分は省略*/
a.btn-tag {
  color: #fff;
  border-bottom: 5px solid #db9014;
  background: #f39800;
}

a.btn-tag:before {
  border-right: 2px solid rgba(255, 255, 255, .5);
}

a.btn-tag:hover {
  margin-top: 3px;
  border-bottom: 2px solid #db9014;
  background: #ffa50e;
}

装飾を変えてみたパターンです。


ブックマークに追加ボタン

HTML・CSSを見る

ブックマークに追加するようなイメージのボタンです。


お気に入りに追加ボタン

HTML・CSSを見る

お気に入りに追加するようなイメージのボタンです。


コメントを見るボタン

HTML・CSSを見る

コメントを見るボタンのようなイメージです。コメント・レビュー数を表示しておくイメージです。


カートに入れるボタン(縦)

HTML・CSSを見る

縦型のカートに入れるボタンイメージです。


お気に入りに追加ボタン(縦)

HTML・CSSを見る

縦型のお気に入りに追加ボタンイメージです。

SNS等のボタン

主要SNS等のボタンです。ボタンの色はブランドカラーに合わせるようにしましょう。アイコンはFontAwesomeです。

Facebook

HTML・CSSを見る
<a href="" class="btn btn-sns btn-sns--facebook">
  <i class="fab fa-facebook-f"></i>
</a>
/*主な共通部分は省略*/
a.btn-sns {
  font-size: 2.4rem;
  line-height: 50px;

  width: 50px;
  height: 50px;
  padding: 0;

  letter-spacing: 0;

  color: #fff;
  border-radius: 50%;
}

a.btn-sns:hover {
  color: #fff;
}

a.btn-sns--facebook {
  background: #1877f2;
}

facebookのボタンです。

Twitter

HTML・CSSを見る
<a href="" class="btn btn-sns btn-sns--twitter">
  <i class="fab fa-twitter-f"></i>
</a>
/*主な共通部分は省略*/
a.btn-sns {
  font-size: 2.4rem;
  line-height: 50px;

  width: 50px;
  height: 50px;
  padding: 0;

  letter-spacing: 0;

  color: #fff;
  border-radius: 50%;
}

a.btn-sns:hover {
  color: #fff;
}

a.btn-sns--twitter {
  background: #1da1f2;
}

Twitterのボタンです。

Instagram

HTML・CSSを見る
<a href="" class="btn btn-sns btn-sns--instagram">
  <i class="fab fa-instagram-f"></i>
</a>
/*主な共通部分は省略*/
a.btn-sns {
  font-size: 2.4rem;
  line-height: 50px;

  width: 50px;
  height: 50px;
  padding: 0;

  letter-spacing: 0;

  color: #fff;
  border-radius: 50%;
}

a.btn-sns:hover {
  color: #fff;
}

a.btn-sns--instagram {
  background: #d6249f;
  background: -webkit-linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  background: linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

Instagramのボタンです。

LINE

HTML・CSSを見る
<a href="" class="btn btn-sns btn-sns--line">
  <i class="fab fa-line-f"></i>
</a>
/*主な共通部分は省略*/
a.btn-sns {
  font-size: 2.4rem;
  line-height: 50px;

  width: 50px;
  height: 50px;
  padding: 0;

  letter-spacing: 0;

  color: #fff;
  border-radius: 50%;
}

a.btn-sns:hover {
  color: #fff;
}

a.btn-sns--line {
  background: #00b900;
}

LINEのボタンです。

Youtube

HTML・CSSを見る
<a href="" class="btn btn-sns btn-sns--youtube">
  <i class="fab fa-youtube-f"></i>
</a>
/*主な共通部分は省略*/
a.btn-sns {
  font-size: 2.4rem;
  line-height: 50px;

  width: 50px;
  height: 50px;
  padding: 0;

  letter-spacing: 0;

  color: #fff;
  border-radius: 50%;
}

a.btn-sns:hover {
  color: #fff;
}

a.btn-sns--youtube {
  background: #cd201f;
}

Youtubeのボタンです。

wordpress

HTML・CSSを見る
<a href="" class="btn btn-sns btn-sns--wordpress">
  <i class="fab fa-wordpress-f"></i>
</a>
/*主な共通部分は省略*/
a.btn-sns {
  font-size: 2.4rem;
  line-height: 50px;

  width: 50px;
  height: 50px;
  padding: 0;

  letter-spacing: 0;

  color: #fff;
  border-radius: 50%;
}

a.btn-sns:hover {
  color: #fff;
}

a.btn-sns--wordpress {
  background: #21759b;
}

wordpressのボタンです。

CSSで作るボタンまとめ

いかがでしたでしょうか。HTMLとCSSだけでこんなボタンも作れるんだ、と思われたボタンもあったかもしれません。

実際に使うボタンは限られるかと思いますが、デザインの幅を広げておくことでどんな制作物にでも柔軟に使用できますね。

よければご参考にしてください。