Front End Programming
  1. ホーム
  2. ノマドブログ
  3. ウェブ制作
  4. CSS
  5. 【CSSコピペで使える】かわいいボタンデザインコード・コードスニペット集！

【CSSコピペで使える】かわいいボタンデザインコード・コードスニペット集！

公開日
メンテナンス日

CSS

ボタンデザインやコーディングでどうCSSを書いていいか悩むことありませんか？

実用性重視だけどおしゃれなボタンのコードスニペット集をつくりました！

UI/UXの観点からどんなボタンが最適であるべきか解説つき！もちろんコピペで今すぐ使えます。

ボタンを実装する上でUX/UI上重要な3つのポイント

ボタンのデザインでボタンのデザインでユーザーのことを考えて大切にしてことがあります。

1、サイズは適切か

スマホの時サイズが小さすぎるとタップできません。 **縦横のサイズが44px以上（Googleの推奨サイズ）**というのが鉄板です。

2、クリックできそうか

デザインとしてクリックできそうか、がポイントです。
形としてボタンっぽかったらなおわかりやすいかと思います。

よくあるボタンデザインがこんな感じです。
たとえばこんなオレンジのボタンがあるとします。

pointer-events

※ コンバージョン率が高いと言われているのであえてオレンジを使っています。

アイコン、文字をのせたらもうボタンって何と無くわかりますよね？

ユーザーに「なんかクリックできそう」って思わせるのがポイントです。

3、他のパーツと差別化できているか

ウェブサイトではとくにCVボタンなどであれば、クリックされる事が重要なポイント。
他のパーツ（コンテンツ）との差別化をしっかりしておく必要があります。

ベーシックなボタンのコード3つ

まずはベーシックなボタンのコードをご紹介します。

pointer-events

この3つレパートリーを持っていればとりあえずどうにかなります。多分。

よくある続きを読むボタンですね。
今回右に配置したアイコンは「Material Design Iconic Font」を使っています。

Material Design Iconic Font

Flexを使って、文字とアイコンを縦横均等に配置してます。

ベーシックなボタン | Code Pen

pointer-events の使い方と使いどころ

パーツでいえばページネーションや、COMING SOONにしてリンクが貼れないバナーなどに使うことが多めです。
CMSから吐き出すタグを自分では書き換えられないけどCSS側でクリックを禁止したい、などのケースで重宝します。

ホバーで半透明

ホバーで半透明

HTML 
<a href="" class="btn--basic">続きを読む<i class="zmdi zmdi-chevron-right"></i></a>
CSS 
a[class^=btn] { //btnから始まるクラス
  background: #FF9258;
  display: flex;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.btn--basic:hover {
  opacity: 0.7;
}

色が反転

色が反転

ホバーすると、ボーダーが反転します。
他のボタンとサイズを合わせるためにbox-sizing: border-box;でborderを内側に含めています。

HTML 
<a href="" class="btn--border">続きを読む<i class="zmdi zmdi-chevron-right"></i></a>
CSS 
.btn--border {
  height: 46px;
  background: #FF9258;
  display: flex;
  width: 150px;
  border-radius: 5px;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: .3s;
  border: 2px solid #FF9258;
}

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

定番の立体感のあるボタンらしいボタン

定番の立体感のあるボタンらしいボタン

定番のボタンらしいボタンを作るとき、私はかならずY軸に向かったbox-shadowを使います。
クリックしたとき、押した感が出るようにtransformYで位置をわずかに下げ、さらにbox-shadowも同じ分量減らします。
これで不自然な挙動をしないボタンらしいボタンの完成です。

HTML 
<a href="" class="btn--button">続きを読む<i class="zmdi zmdi-chevron-right"></i></a>
CSS 
.btn--button {
  position: relative;
  height: 50px;
  background: #FF9258;
  display: flex;
  width: 150px;
  border-radius: 5px;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: .3s;
  box-shadow: 0 4px 0 #B45624;
}

.btn--button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #B45624;
}

CSSセレクターこんな指定の仕方もあるよ！

私、コードが減るという理由で時折トリッキー？な指定方法を使います。参考までに。

クラスの前方一致
セレクタ名[class^=btn]
ある文字列から始まるクラスのみを指定できます。この場合btnほにゃららといった感じですね。
クラスの後方一致
セレクタ名[class$=btn]
逆に後方一致だとこんな書き方ができます。
部分一致
セレクタ名[*=btn]
btnが含まれるか否か

ボタンのCSSコード・スニペット

いくらかわいい、かっこいいと思えてもそのデザイン普通使えないと意味がありませんよね？ 実戦で使えそうなものだけピックしてご紹介します。

スケルトンボタン・ベースから応用まで

背景が黒っぽい場合にスケルトンボタンってかっこいいです。
濃いめのグラデの上に乗っけるのもオススメです。

スケルトンボタン・ベースから応用まで

ベースのスケルトン、クリアソープのようなスケルトン、ネオンのようなスケルトン3つのコードスニペットを作ってみました。

今回のポイントはrgba関数です。
半透明の白は濃いめの背景のデザインを生かせるのでオススメです。
文字サイズが小さいと見えないので注意です。

rgba関数

指定方法: rgba(255, 255, 255, .3)

  • r 赤(0 - 255)
  • g 緑(0 - 255)
  • b 青(0 - 255)
  • a alpha(0 - 1)
    RGBカラーモデルのred・green・blueに、alphaが加わったものです。
    rgbは数値が高いほど純色となります。aが0だと透明で1に近づくにつれ不透明となります。

スケルトンボタン・ベースから応用まで|Code Pen

ベースのスケルトン

ベースのスケルトン

背景を半透明にしただけで、クリックとともに白っぽさが増します。

HTML 
<a href="" class="btn--skeleton">BUTTON</a>
CSS 
.btn--skeleton {
  background: rgba(255, 255, 255, .2);
  display: flex;
  width: 180px;
  height: 60px;
  font-size: 1.6rem;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: .3s;
  border: 1px solid #fff;
}

.btn--skeleton:hover {
  background: rgba(255, 255, 255, .5);
}

クリアソープのようなスケルトンボタン

ベースのスケルトン

クリアソープのように少し立体感をつけてみました。
box-shadowをinsetにして立体感をつけています。

HTML 
<a href="" class="btn--skeleton2">BUTTON</a>
CSS 
.btn--skeleton3 {
  background: rgba(255, 255, 255, .1);
  display: flex;
  width: 180px;
  height: 60px;
  font-size: 1.6rem;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  letter-spacing: .1em;
  color: #E5FF1D;
  text-shadow:  0 0 3px rgba(255, 255, 255, .8);
  text-decoration: none;
  transition: .3s;
  box-shadow: inset 0 0 6px #E5FF1D, 0 0 6px #E5FF1D;
}

.btn--skeleton3:hover {
  color: #E5FF1D;
  background: transparent;
  text-shadow:  0 0 2px #E5FF1D, 0 0 3px #E5FF1D;
  box-shadow: inset 0 0 4px #E5FF1D, inset 0 0 8px #E5FF1D, 0 0 4px #E5FF1D, 0 0 8px #E5FF1D;
}

ネオンのようなスケルトンボタン

ネオンのようなスケルトンボタン

ボーダーをbox-shadowだけで作って、ライトのようにしています。

HTML 
<a href="" class="btn--skeleton3">BUTTON</a>
CSS 
.btn--skeleton3 {
  background: rgba(255, 255, 255, .1);
  display: flex;
  width: 180px;
  height: 60px;
  font-size: 1.6rem;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  letter-spacing: .1em;
  color: #E5FF1D;
  text-shadow:  0 0 3px rgba(255, 255, 255, .8);
  text-decoration: none;
  transition: .3s;
  box-shadow: inset 0 0 6px #E5FF1D, 0 0 6px #E5FF1D;
}

.btn--skeleton3:hover {
  color: #E5FF1D;
  background: transparent;
  text-shadow:  0 0 2px #E5FF1D, 0 0 3px #E5FF1D;
  box-shadow: inset 0 0 4px #E5FF1D, inset 0 0 8px #E5FF1D, 0 0 4px #E5FF1D, 0 0 8px #E5FF1D;
}

グラデーションを利用したボタン

グラデーションを利用したボタン

グラデーションはアニメーションが滑らかに行われないのが難点です。
なので、beforeなどで1個要素を作って移動などアニメーションをさせます。

ここでのポイントがz-indexです。

擬似要素を文字の下にもぐりこませないと、字が見えないのでz-indexを使って要素の順番を入れ替えます。

  • 親要素 z-index: 1
  • 擬似要素 z-index: -1

グラデーションを利用したボタン|Code Pen

今回グラデーションを作るのに使ったのはこのジェネレーターです。 CSS Gradient

グラデーション反転

グラデーションを利用したボタン

あらかじめグラデーションを逆にした擬似要素をopacity:0で隠しておき、ホバー時に表示させグラデーションを反転させます。

HTML 
<a href="" class="btn--gradient">BUTTON</a>
CSS 
.btn--gradient {
  z-index: 1;
  display: flex;
  width: 150px;
  height: 50px;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  position: relative;
  background: rgb(238,198,139);
  background: linear-gradient(0deg, rgba(238,198,139,1) 0%, rgba(194,91,24,1) 100%);
  letter-spacing: .2em;
  text-shadow: 0 1px 2px #c25b18;
  box-shadow: 0 3px 0 #c25b18;
  transition: .3s;
}

.btn--gradient:hover{
  transform: translateY(1px);
  text-shadow: 0 -1px 2px #c25b18;
  box-shadow: 0 2px 0 #a44d15;
}

.btn--gradient::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(194,91,24,1) 0%, rgba(238,198,139,1) 100%);
  opacity: 0;
  transition: .3s;
}

.btn--gradient:hover::before {
  opacity: 1;
}

グラデーションが横にスライド

擬似要素を2倍（200%）のサイズに作り、overflow: hiddenで隠しておきます。 hoverした時にleft: -100%でアニメーションさせます。

グラデーションが横にスライド

HTML 
<a href="" class="btn--gradient2">BUTTON<i class="zmdi zmdi-chevron-right"></i></a>
CSS 
.btn--gradient2 {
  z-index: 1;
  display: flex;
  width: 150px;
  height: 50px;
  justify-content: space-evenly;
  align-items: center;
  color: #184dc2;
  text-decoration: none;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.btn--gradient2::before {
  content: '';
  display: block;
  width: 200%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: rgb(139,238,145);
  background: linear-gradient(45deg, rgba(139,238,145,1) 0%, rgba(109,199,255,1) 100%);
  transition: .3s;
}

.btn--gradient2 i {
  text-shadow: 0 0 0 transparent;
  transition: .3s;
}

.btn--gradient2:hover i {
  transform: translateX(3px)
}

.btn--gradient2:hover i {
  text-shadow: 4px 0 0 #184dc2, 8px 0 0 #184dc2;
}

.btn--gradient2:hover::before {
  left: -100%;
}

きっちりセパレートさせた色でアニメーション

きっちりセパレートさせた色でアニメーション

私のこのブログのデザインにも使っている左上のマークがスライドするボタンです。
ポイントはグラデの角度を315度の斜めにし左右の色をそれぞれ50%に設定します。
あとは先ほどのグラデーション横にスライドのようにアニメーションさせるだけです。

HTML 
<a href="" class="btn--gradient3">BUTTON</a>
CSS 
.btn--gradient3 {
  z-index: 1;
  display: flex;
  width: 150px;
  height: 50px;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  position: relative;
  border: 1px solid #211b71 ;
  letter-spacing: .2em;
  overflow: hidden;
  transition: .3s;
}

.btn--gradient3::before {
  content: '';
  display: block;
  width: 200%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: -1;
  background: rgb(33,27,113);
  background: linear-gradient(315deg, rgba(33,27,113,1) 50%, rgba(254,255,251,1) 50%);
  transition: .3s;
}

.btn--gradient3:hover {
  color: #211b71;
}

.btn--gradient3:hover::before {
  left: 0;
}

その他よりインタラクティブなボタン

その他型押しのような文字のボタン、shadowを利用したクールなボタン、マウスオーバーすると波紋が広がるボタンなど作ってみました。

その他よりインタラクティブなボタン

その他よりインタラクティブなボタン| Code Pen

文字がエンボス

文字がエンボス

text-shadowとbox-shadowでエンボス風のボタンです。

HTML 
<a href="" class="btn--emboss">BUTTON</a>
CSS 
.btn--emboss {
  display: flex;
  width: 180px;
  height: 70px;
  justify-content: center;
  align-items: center;
  color: #de7fb5;
  font-weight: bold;
  border-radius: 10px;
  font-size: 20px;
  text-decoration: none;
  position: relative;
  text-shadow: 2px 2px 2px #c8428f, -2px -2px 2px #f2c4df;
  background: #cb69a2;
  letter-spacing: .2em;
  box-shadow: inset 2px 2px 3px #f2c4df, inset  -2px -2px 2px #c8428f, 0 0 10px rgba(0, 0, 0, .3);
  transition: .3s;
}

.btn--emboss:hover {
  background: #c15795;
  color: #cb69a2;
  text-shadow: 2px 2px 2px #c8428f, -2px -2px 2px #ecaed2;
}

パキッとした影が広がるボタン

パキッとした影が広がるボタン

box-shadowを2個重ねるだけで、クールなボタンができます。

HTML 
<a href="" class="btn--shadow">BUTTON</a>
CSS 
.btn--shadow {
  display: flex;
  width: 180px;
  height: 70px;
  justify-content: center;
  align-items: center;
  color: #333;
  font-weight: bold;
  font-size: 20px;
  background: #fff;
  text-decoration: none;
  border: 3px solid #333;
  transition: .3s;
}

.btn--shadow:hover {
  background: #333;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 6px 6px 0 #333, -6px -6px 0 #333;
}

クリックすると波紋が広がるボタン

クリックすると波紋が広がるボタン

クリックすると波紋が広がります。

HTML 
<a href="" class="btn--bubble">BUTTON</a>
CSS 
.btn--bubble {
  z-index: 1;
  display: flex;
  width: 180px;
  height: 70px;
  justify-content: center;
  align-items: center;
  color: #fff;
  letter-spacing: .2em;
  font-weight: bold;
  border-radius: 5px;
  font-size: 20px;
  text-decoration: none;
  background: rgb(105,147,203);
  background: linear-gradient(0deg, rgba(105,147,203,1) 0%, rgba(97,110,213,1) 100%);
  overflow: hidden;
  position: relative;
}

.btn--bubble::before {
  content: '';
  height: 25px;
  width: 25px;
  left: calc(50% - 12px);
  bottom: calc(50% - 12px);
  border-radius: 50%;
  display: block;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255, 0) 0%, rgba(255,255,255,.5) 100%);
  opacity: 0;
  position: absolute;
}

.btn--bubble::after {
  position: absolute;
  content: '';
  height: 25px;
  width: 25px;
  left: calc(50% - 12px);
  bottom: calc(50% - 12px);
  display: block;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255, 0) 0%, rgba(255,255,255,.5) 100%);
}

.btn--bubble:hover::before {
  animation: expand 2.5s .5s infinite;
}

.btn--bubble:hover::after {
  animation: expand 2.5s infinite;
}

@keyframes expand{
  0% {
    opacity: .5;
  }
    100% {
    transform: scale(10);
    opacity: 0;
  }
}

ボーダーがアニメーションするボタン

ボーダーがアニメーションするボタン

ボーダーが左上と右下からアニメーションするボタンです。**heightとwidthを0から100%**に広げることで実現しています。

HTML 
<a href="" class="btn--border">BUTTON</a>
CSS 
.btn--border {
  display: flex;
  width: 180px;
  height: 70px;
  justify-content: center;
  align-items: center;
  color: #333;
  font-weight: bold;
  font-size: 20px;
  background: #fff;
  text-decoration: none;
  border: 3px solid #333;
  transition: .3s;
  box-sizing: border-box;
  position: relative;
}

.btn--border::before {
  content: '';
  height: 0;
  width: 0;
  right: -3px;
  top: -3px;
  position: absolute;
  border-top: 3px solid orange;
  border-right: 3px solid orange;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  opacity: 0;
  transition: .5s;
}

.btn--border::after {
  content: '';
  height: 0;
  width: 0;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-bottom: 3px solid orange;
  border-left: 3px solid orange;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  opacity: 0;
  transition:.5s;
}

.btn--border:hover {
  background: #333;
  color: orange;
}

.btn--border:hover::before,
.btn--border:hover::after {
  height: 100%;
  width: 100%;
  opacity: 1;
}

まとめ・ウェブサイトと調和するボタンを設置しよう

ボタンデザインたくさんあって目移りすると思いますが、凝りすぎているとサイトと調和するのが難しい場合もあります。

サイトと調和するかよく考慮した上で、実装するのが◯ですね！

その他チェックボックス やセレクトボックスのフォームパーツ類もコードスニペットあります。 参考にしてください。

みなさんのコーディングライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。

お読みいただきありがとうございます。
「銀ねこアトリエ」をより良いブログにするために是非応援してください！

銀ねこアトリエを応援する
Category
ウェブ制作
この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままな海外ノマドエンジニア。IT業界10年以上。テクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経て今に至る。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

関連記事

  1. WordPressのラジオボタンとチェックボックスをカスタマイズ

  2. 実務で使える！グローバルメニューホバーアニメーションスニペット集

  3. 便利なのに使ってないの？！CSSプロパティ5選

  4. 全部使ったことある？便利なCSS関数12選！！

  5. aタグ（リンク）のクリックできる範囲をCSSで親要素まで広げる

  6. 待ってました！Chrome88 で aspect-ratioプロパティがついにサポート

ジャンル

記事を探す

    お仕事のご依頼

    相談する

    初見の方、30分無料相談承っております。