CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
CSS
- 利用シーン例
- HTML・CSSだけでボタンを作りたい場合
CSS逆引きレシピ
このページの情報で解決しなかったら
検索してみましょう
CSS逆引き検索
CSSで作れるボタンについて120個以上サンプルを作成してみました。
どこよりも詳しく、どこよりもサンプル多く解説しています。（おそらく..）
どれも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を使用しています。
その他フォントについてですが、日本語で使えるWebフォントは限られています。使うテキストを限定するならフォントファイルから作るという方法もありますが、使用用途をボタンだけに限定するのであれば、そこまでする必要はなく画像で作ったほうがいいです。
電話番号や英数字であれば、Google fontを使うことでより良いデザインになります。速度を気にされる場合はWebフォント高速化をご参考ください。
前置きが長くなってしまいましたが、ボタンサンプルについて見ていきましょう。
基本的なボタン
装飾等が少ないシンプルな基本形のCSSボタンデザインです。
基本的なborderや影を使ったボタン
CSSのborderやbox-shadowを使って作ったボタンです
立体
ボタンに立体感を出しています。立体感を出す方法としては主にborder-bottomで下線を指定するか、box-shadowで影を付けるか、背景を重ねるか、などの方法があります。それぞれ向き不向きがあり、ホバー時に挙動を付ける場合は、プロパティの指定の方法にも若干違いがあるので注意が必要です。
丸形のボタン
丸形のボタンデザインのサンプルです
正円ボタン / 立体
正円ボタンを立体風にしています。border-bottomだとあまり立体感が作れません。サンプルだとbox-shadowです。もっと立体感を出したい場合は擬似クラスなどを使ったほうがいいと思います。
グラデーションを使ったボタン
CSSのborderやbox-shadowを使って作ったボタンです
グラデーション基本
CSSのlinear-gradientを使ってグラデーションをかけています。サンプルのようにホバー時にスムーズに背景を切り替えたい場合は、擬似クラスなどで別のグラデーションを重ね、ホバー時に消していくといったことが必要です。
グラデーション / 影 / 斜め
CSSのtransform: skewでボタン全体を傾けています。斜めにするのとグラデーションは関係ありませんが、スタイリッシュなサイトにいいかもしれません。
グラデーション / 線 / 角丸
こちらもよくある基本的なボタンですね。
古いサイトだとこういったボタンが画像で作られていることがありますが、今ではCSSで簡単に作れます。CSSで作ることでとても軽く拡張性も高くなります。
フラットなボタン
borderやグラデーションを工夫して少し立体的に見えるボタンのサンプルです。
立体的ボタン
borderやグラデーションを工夫して少し立体的に見えるボタンのサンプルです。
線を使った立体風ボタン
上下左右でそれぞれ異なる色のborderを指定することで、立体的に見えるボタンになります。borderのinsetやoutsetでも似たような表現を作れますが、こちらの方法の方ではより細かく色が指定できるため、立体の深みを細かく調整することができます。
3Dボタン
3Dボタンです。CSSのpreserve-3d、perspectiveなどで遠近を作っています。
3D表現を覚えるとのっぺらとしたWebに奥行きの表現を加えることができます。このwebサイトでも3D表現を使っています。（PC画面で右上のハンバーガーメニューをクリックしてみてください。）
しかし、ボタンの役割とは押してもらうことにあり、ボタンを3Dで表現することでどれだけコンバージョンが上がるのか？と言えば、あまり効果はないのではないでしょうか。むしろデザインや挙動によっては、ユーザーにボタンと認識してもらいにくい場合もあります。
3Dボタンを作るのに労力を割くよりも、その他の作り込みに時間をかけたほうが良いかもしれません。
3Dボタン：2
こちらもマウスオーバーしないとわからないですが、ホバーで側面が表示されます。基本的にやっていることは他と同じです。3Dを作ることで立体を形成できます。このWebサイトのトップページのローディングにも同じ方法を使っています。
主に線を使用したデザインのボタン
線を主にしたシンプルなボタンです。実際に使用する際には、PCではホバーアクションは必ず付けたほうがいいでしょう。さらには色やアイコンをつけてボタンだとわかりやすいものにしましょう。
線のみのボタン
シンプルでホバーがおしゃれではありますが、このままではボタンと認識されにくいので、矢印を付けたり、上下にテキストを配置するなどして、押せるボタンだと認識できるようにする必要があります。
線とグラデーションを使用したデザインのボタン
線とテキストにグラデーションをかけています。ボタンの線が明るい色の場合は、背景色が濃い色でないと分かりづらいです。
グラデーション線・テキスト
今度はテキストにもグラデーションがかかっているのが分かるかと思います。
テキストへのグラデーションはbackground-clip: text;で実現させています。
メタリックなボタン
背景まで金属感あるものにすると、高級感がでません。
サンプルのように背景色と対比させると高級感が出ますね。後はボタンと認識してもらえる工夫が必要です。
異型な形のボタン
線とテキストにグラデーションをかけています。ボタンの線が明るい色の場合は、背景色が濃い色でないと分かりづらいです。
いびつな形のボタン
svgを使えば自由なあらゆる表現ができますがいかんせん面倒ですよね。簡単ないびつな形のボタンであればborder-radiusを工夫することでサンプルのようないびつな形のボタンが作れます。
クーポン券のようなデザイン
クーポン券をイメージしたCSSボタンデザインを作成してみました。実際に使えるシチュエーションは限られるかと思います。参考程度にしていただければ幸いです。
クーポン券ボタン１
切り取り線をイメージしたクーポン券デザインです。10%OFF!の部分には「Roboto」というフォントを使っています。ハサミはFontAwesomeです。webフォントを使うことでより１段魅力的なデザインになります。
クーポン券ボタン２
今度も切り離すイメージのクーポン券です。マウスオーバーで切り取り線で折りたたむような表現をしています。
クーポン券ボタン３
こちらのボタンも切り取り線で切るイメージです。
本来、切るという行為は紙で行うものであり、Webで使うデザインとしては古臭い印象ですね。若年層には響かないデザインかもしれません。
クーポン券ボタン４
両サイドが丸く欠けているようなボタンになります。実際にかけているわけではなく、擬似クラスで背景色と同色の丸形オブジェクトを乗せているだけです。SVGを使ったほうがいいかもしれません。
グラデーションや影を使ってリッチに表現したボタン
実際にありそうなボタンをCSSで作ってみました。
実際こういったボタンまでCSSで作る必要があるか？と言われたら制作物次第ですが、グラーデションの扱いなどに慣れると案外簡単に作ることができます。
画像で作ると修正の手間が大きく、かつ、ホバー・クリック時などで動きの表現ができません。使うシチューエーションは限られますし、クリックできることも分かりづらいので実際に使うことはかなり少ないと思います。
スイッチ黒
クリックしてみましょう。スイッチが切り替わります。切り替えの表現はinputタグのcheckboxを使って切り替えを表現しています。こちらのCodePenを参考にさせていただきました。
スイッチ赤 ON OFF
先ほどのボタンをアレンジしてみました。ONにすると光ったような表現になります。
スイッチボタン / フラット
すみません。こちらはグラデーションは使ってません。。次に紹介するボタンとの対比のためにここで紹介しました。制作物によりますが、フラットデザインのほうが色んなシーンで使えると思います。
スイッチボタン / リアル
先程のボタンをリアルにしてみました。なんか自爆スイッチみたいなものに使えそうですね。そういう遊び要素があるWebサイトで使うとおもしろそうです。ホバー時とクリック時にアクションがあります。
電源ボタン / フラット
電源ボタンのフラットイメージです。こちらもグラデーションは使っていませんが、次のボタンとの対比です。ちなみにアイコン部分についてはアイコンフォントです。
実用的なボタン
これまでCSSボタンのデザイン例を紹介してきました。少し編集すればそのまま使用できるものばかりですが、そのまますぐ使えるというわけではありません。
次に実用的ですぐ使えそうなCSSのボタンサンプルについて紹介していきたいと思います。
マイクロコピーを工夫したボタン周り
自分でもよく使うデザイン例です。ボタンについてはボタン周りの説明が大切です。このようにマイクロコピーを工夫するだけでコンバージョンも上がります。
ラベリングを工夫したボタン周り
「資料請求をする」といった文言だけのボタンだと、ボタンの役割が少し分かりづらいですよね。サンプルのように説明を足すことで、「物件の資料」「無料」ということが分かります。訴求したいポイントが多くあっても、あまりごちゃごちゃさせるとボタンだと認識しにくくなってしまうので注意です。
ラベリングを工夫したボタン周り4
重要なテキストは色を変えるなどして工夫します。矢印をつけなくても指アイコンをつけることで押せるボタンだということがわかります。
スマホ用のボタン2 / 2カラム
電話ボタンに番号を書いておくことでコンバージョン率を上げることができる場合があります。理由としては必ずしも閲覧しているユーザーがその端末で電話をするとは限らないからです。
調べたのは自分だけど電話をする行為は他の人に任せる、とかよくありますよね。
スマホ用のボタン3 / 2カラム
ボタンを立体的にしたパターンです。スマホではホバーというものがないので、ホバーアクションは基本必要ありません。サービスによっては押した時のアクションがあるといいかもしれません。
スマホ用のボタン4 / 2カラム
スマホでは幅の制限あるので、文字数には気をつけましょう。
レスポンシブデザインなどでは画面サイズで可変となるvwでフォントサイズを指定することも多いと思います。
ただブラウザによって10px以下の表現ができなかったり、改行位置が変わってしまったりすることがあるので注意が必要です。
スマホ用のボタン5 / 1カラム
無理して2カラムにするよりも、シンプルに1カラムで文字サイズを大きくしたほうがいいですね。
SNS等のボタン
主要SNS等のボタンです。ボタンの色はブランドカラーに合わせるようにしましょう。アイコンはFontAwesomeです。
CSSで作るボタンまとめ
いかがでしたでしょうか。HTMLとCSSだけでこんなボタンも作れるんだ、と思われたボタンもあったかもしれません。
実際に使うボタンは限られるかと思いますが、デザインの幅を広げておくことでどんな制作物にでも柔軟に使用できますね。
よければご参考にしてください。
