CSSボタンデザイン30選｜コピペで使えるおしゃれなホバーエフェクト集

生徒

ボタンをおしゃれにしたいけど、CSSってどこから書けばいいか分かりません…。ネットで見つけたコードをコピペしても、なぜか自分のサイトだと崩れちゃうんです。

ペン博士

任せて！この記事ではコピペするだけで使えるCSSボタンを30種類、まるっと用意したよ。しかも共通の土台から作るから、崩れる理由も、自分好みに直す方法もぜんぶ分かるようになるね！

Webサイトやランディングページの印象を大きく左右するのが「ボタン」です。同じ内容のサイトでも、ボタンがおしゃれで押しやすいだけでクリック率が変わることは、Web制作の現場ではよく実感するところです。とはいえ「デザインの引き出しが少ない」「コピペしたコードが自分の環境だと崩れる」「ホバーエフェクトの付け方が分からない」という悩みは、初心者の方に非常に多いものです。

この記事では、WithCode編集部が実務で使ってきた知見をもとに、コピペしてすぐ使えるCSSボタンデザインを30種類まとめました。基本形からグラデーション、立体、ネオン、光沢スイープ、グラスモーフィズムまで、タイプ別に整理しているので「作りたい雰囲気」から探せます。さらに、単なるコピペ集で終わらせないために、transitionやtransformの基礎、アクセシビリティ、レスポンシブ対応、そして「コピペ後に自分好みへ直す手順」まで丁寧に解説します。

先に、この記事の結論をまとめます。

• CSSボタンは共通クラス（.btn）で土台を作り、種類ごとの装飾を足すのが崩れにくく管理しやすい
• 見た目を変えるのはbackground・color・border・border-radius・box-shadowの5つがほぼすべて
• ホバーの気持ちよさはtransitionとtransformで決まる（動きは0.2〜0.3秒が目安）
• おしゃれさと同じくらいコントラスト・タップ領域44px・フォーカス表示などのアクセシビリティが大切
• この記事の30種はすべて同じHTMLの受け皿にコピペするだけで動くように設計している

まず準備：すべてのボタンで使う共通HTMLとリセットCSS

最初に、これから紹介する30種類すべてで使い回す「受け皿」を用意します。ここを理解しておくと、コピペしたコードが崩れる原因の多くは解消できます。ボタンはHTMLのbutton要素で作る方法と、リンク用のaタグで作る方法があります。見た目を揃えるため、どちらにも同じ.btnクラスを付けるのがポイントです。

共通のHTML（この2種類にクラスを足していく）

<!-- button要素で作る場合 -->
<button class="btn">送信する</button>

<!-- aタグ（リンクボタン）で作る場合 -->
<a href="#" class="btn">詳しく見る</a>

以降の各ボタンは、このclass="btn"に種類ごとのクラスを1つ追加する形で使います。たとえばソリッドボタンならclass="btn btn-solid"のように書きます。

共通のリセットCSS（最初に一度だけ貼る）

次のCSSは、ボタンの土台となる共通スタイルです。aタグでもbuttonでも同じ見た目になるように、余白・文字サイズ・角丸・カーソル・そしてホバーをなめらかにするtransitionをまとめて指定しています。これを最初に一度だけ貼り、あとは各ボタンのCSSを追記していきます。

/* すべてのボタンに共通で当てるリセット */
.btn {
  /* aタグでも同じ見た目にするための土台 */
  display: inline-block;
  box-sizing: border-box;
  padding: 14px 32px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none; /* aタグの下線を消す */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  /* ふわっと変化させる基本設定 */
  transition: all 0.25s ease;
}

/* キーボード操作時のフォーカス表示（アクセシビリティ） */
.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

この土台がある前提なので、以降のサンプルは装飾に関わる部分だけを掲載します。「余白やカーソルの指定が書いてないのに動く」のは、この共通CSSが効いているからです。

なぜ土台を分けると崩れないのか

初心者がコピペしたボタンで崩れる典型的な原因は、コピー元のサイトが持っていた「見えない土台のCSS」まで一緒に持ってこられないことにあります。たとえば余白や文字サイズ、リンクの下線を消す指定は、多くのサイトで別のCSSにまとめられています。そのため装飾部分だけをコピペすると、余白がなくなったり下線が残ったりして「見本と違う」状態になります。この記事のように土台（共通CSS）と装飾（種類ごとのCSS）を分けておけば、土台を一度貼るだけで、どのボタンをコピペしても同じ前提の上で動くため崩れにくくなります。

ボタンの見た目を決める5つのプロパティ

ボタンのデザインは、実はたった5つのCSSプロパティの組み合わせでほとんど表現できます。この5つを押さえるだけで、30種類のコードが「何をしているのか」が一気に読めるようになります。

逆に言えば、この5つを1つずつ変えて確認するだけで、自分だけのオリジナルボタンが作れます。この記事のサンプルも、すべてこの5つに動き（transition／transform）を足しているだけです。

【基本】ソリッド・ゴースト・角丸・ピルの4タイプ

まずは、あらゆるサイトの土台になる基本の4タイプです。ソリッド（塗りつぶし）は最も目立つ「主役ボタン」、ゴースト（枠線のみ）は「サブのボタン」、角丸・ピルは柔らかい印象を出したいときに使うと覚えると選びやすくなります。

1. ソリッドボタン（塗りつぶしの基本形）

最もよく使う塗りつぶしボタンです。ホバーで少しだけ色を濃くして、押せることを伝えます。サイトの中で一番押してほしい「主役ボタン（申し込む・購入するなど）」に向いています。背景色をブランドカラーにするだけで、そのサイトらしい主役ボタンが完成します。迷ったらまずこの形から始めるのが安全です。

.btn-solid {
  background-color: #2563eb;
  color: #ffffff;
}
.btn-solid:hover {
  background-color: #1d4ed8; /* 少し濃い青にする */
}

2. ゴーストボタン（枠線だけ）

背景を透明にし枠線だけで見せるタイプです。ホバーで背景が塗られる反転演出が定番です。塗りつぶしのソリッドボタンより控えめに見えるため、「主役ボタンの隣に置く第2候補（詳しく見る・キャンセルなど）」として使うと画面が整理されます。ソリッドとゴーストをセットで使うと、押してほしい順番が自然に伝わります。

.btn-ghost {
  background-color: transparent;
  color: #2563eb;
  border: 2px solid #2563eb;
}
.btn-ghost:hover {
  background-color: #2563eb;
  color: #ffffff;
}

3. 角丸ボタン

border-radiusを大きめにして、親しみやすい印象にしたボタンです。角の丸みは印象を大きく左右し、値が小さいと硬派でシャープに、大きいと柔らかく優しい雰囲気になります。toC向けのサービスや、女性向け・子ども向けのサイトでは、やや大きめの角丸が好まれる傾向があります。

.btn-round {
  background-color: #10b981;
  color: #ffffff;
  border-radius: 12px; /* 角をやや大きめに丸める */
}
.btn-round:hover {
  background-color: #059669;
}

4. ピル（丸型）ボタン

border-radiusに999pxのような大きな値を入れると、両端が完全な半円のピル型になります。薬のカプセル（pill）のような形なのでこう呼ばれます。

.btn-pill {
  background-color: #f59e0b;
  color: #ffffff;
  border-radius: 999px; /* 大きな値で完全な楕円（ピル型）にする */
  padding-left: 40px;
  padding-right: 40px;
}
.btn-pill:hover {
  background-color: #d97706;
}

【グラデーション】華やかで今っぽい印象にする

グラデーションはlinear-gradient()で作ります。第1引数に角度（90degで左→右）、続けて色を並べるだけです。背景を大きめに用意して位置をずらすと、ホバーで色が流れるおしゃれな動きになります。

5. 横グラデーション（ホバーで色が流れる）

background-sizeを200%にして、ホバーでbackground-positionを動かすのがコツです。背景を実際のボタンより横に2倍広く用意しておき、その表示位置をずらすことで、グラデーションが左右にスライドしているように見せています。IT系・クリエイティブ系のサイトで、今っぽさや先進的な印象を出したいときに向いています。

.btn-grad {
  color: #ffffff;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  /* backgroundの位置移動で色が流れるように見せる準備 */
  background-size: 200% 100%;
  background-position: left center;
}
.btn-grad:hover {
  background-position: right center; /* グラデーションをスライド */
}

6. グラデーション枠線ボタン

中身は白のまま、枠線だけをグラデーションにする少し上級なテクニックです。背景を2枚重ね、background-clipで「内側は塗りつぶし用」「外側は枠用」と描き分けます。

.btn-grad-border {
  position: relative;
  color: #6366f1;
  background: #ffffff;
  border: 2px solid transparent;
  /* 背景に2枚重ね：内側は白、外側はグラデーション枠 */
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(90deg, #6366f1, #ec4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.btn-grad-border:hover {
  color: #ec4899;
}

虹色アニメーション（30番目・常時グラデーションが動く）

先に紹介しておくと、記事後半の30番目ではグラデーションが自動で流れ続ける派手なボタンも用意しています。イベント告知などのアクセントに向いています。

.btn-rainbow {
  color: #ffffff;
  /* 4色をつなげて左右にアニメーションさせる */
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #6366f1);
  background-size: 300% 100%;
  animation: rainbow 6s linear infinite;
}
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.btn-rainbow:hover {
  filter: saturate(1.3);
}

ホバーの気持ちよさを決める transition の基礎

transition（トランジション）とは、「ある状態から別の状態へ変わるときに、その変化をなめらかにつなぐ」ためのCSSです。これがないと、ホバー時に色が一瞬でパチッと切り替わり、安っぽい印象になります。

.btn {
  background-color: #2563eb;
  /* transition: 対象プロパティ 変化にかける時間 加速の仕方; */
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #1d4ed8; /* 0.3秒かけてなめらかに変わる */
}

/* 複数まとめて指定するときは all を使うと楽 */
.btn-all {
  transition: all 0.25s ease;
}

transitionは「対象・時間・加速の仕方」の3つで書きます。読み方は次の通りです。

目安として、ボタンのホバーは0.2〜0.3秒に収めると上品に見えます。1秒など長すぎると「反応が遅い」と感じられ、逆にストレスになるので注意しましょう。

イージング（動きのカーブ）で印象が変わる

transitionの最後に指定するイージングは、動きの「加速の仕方」を決める部分です。同じ0.3秒でも、カーブが違うだけで受ける印象が変わります。代表的なものを整理します。

より細かく調整したいときはcubic-bezier()で独自のカーブも作れますが、初心者のうちはease か ease-out を使えば十分おしゃれに見えます。凝りすぎず、まずは秒数とイージングの2つで感覚をつかむのがおすすめです。

【立体・押し込み】box-shadowで厚みと押した感を出す

box-shadowは影を付けるプロパティですが、影の位置や向きを工夫すると「厚み」や「押し込み」を表現できます。立体ボタンは、下方向に影を敷いて厚みを見せ、クリック時に沈めるのが定番のパターンです。

7. 3Dプッシュボタン（クリックで沈む）

下向きの影で厚みを作り、:hoverと:activeで少しずつ沈めます。物理的なボタンを押したような手応えが出ます。仕組みは単純で、box-shadowの縦方向の値でボタンの「厚み」を表現し、押されるほどtranslateYでボタン本体を下げ、同時に影の厚みを減らすことで沈み込みを再現しています。ゲーム風のサイトや、クリックの楽しさを演出したいボタンに向いています。

.btn-3d {
  background-color: #ef4444;
  color: #ffffff;
  /* 下向きの影で厚み（立体感）を表現 */
  box-shadow: 0 6px 0 #b91c1c;
}
.btn-3d:hover {
  /* 少し沈めて影を薄くし、押した感を出す */
  transform: translateY(2px);
  box-shadow: 0 4px 0 #b91c1c;
}
.btn-3d:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #b91c1c;
}

8. 押し込みボタン（内側に凹む）

inset付きのbox-shadowで内側に影を落とし、クリック中だけ凹ませます。

.btn-press {
  background-color: #334155;
  color: #ffffff;
  box-shadow:
    inset 0 0 0 rgba(255, 255, 255, 0),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
.btn-press:active {
  /* クリック中は内側に影を入れて凹ませる */
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

9. ふんわりシャドウ（ホバーで浮く）

白いカード風ボタンです。ホバーで影を大きくして、ふわっと浮き上がる印象にします。

.btn-shadow {
  background-color: #ffffff;
  color: #1e293b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-shadow:hover {
  /* 影を大きく・濃くして浮き上がって見せる */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

【枠線・下線アニメーション】さりげなく動かして上品に

疑似要素（::before／::after）とtransform: scaleX()を組み合わせると、枠線や下線がスーッと伸びる上品なアニメーションが作れます。テキストリンク風のボタンや、余白の広いデザインと相性が良い演出です。

10. スライド塗りボタン（左から色が入る）

疑似要素を左から流し込み、ホバーで背景を塗りつぶします。初期状態ではtranslateX(-100%)で色を左の外へ逃がしておき、ホバーでtranslateX(0)に戻すことで、色が左から入ってくる動きを作っています。ゴーストボタンの反転よりも動きがあり、リンク集やナビゲーションのボタンに向いています。

.btn-line {
  position: relative;
  background: transparent;
  color: #0ea5e9;
  border: 2px solid #0ea5e9;
  overflow: hidden;
}
.btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0ea5e9;
  /* 初期状態は左へ逃がして見えなくする */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn-line:hover {
  color: #ffffff;
}
.btn-line:hover::before {
  transform: translateX(0); /* 左から塗りつぶす */
}

11. 下線が伸びるボタン

transform-origin: leftで左端を基点に、下線を左から右へ伸ばします。scaleX(0)で最初は幅ゼロ（見えない）にしておき、ホバーでscaleX(1)にして伸ばす仕組みです。背景を持たないテキストリンク風のボタンなので、余白を広く取ったミニマルなデザインと好相性です。

.btn-underline {
  position: relative;
  background: transparent;
  color: #111827;
  padding: 8px 4px;
}
.btn-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #f43f5e;
  transform: scaleX(0);
  transform-origin: left; /* 左端を基点に伸ばす */
  transition: transform 0.3s ease;
}
.btn-underline:hover::after {
  transform: scaleX(1);
}

22. 下から塗り上げるボタン

枠線ボタンの背景を、下から上へせり上げて塗りつぶすパターンです。10番の「左から」に対して、こちらは「下から」。塗る方向を変えるだけで印象がガラリと変わります。高さを0から100%に変化させるだけのシンプルな仕組みですが、上品で使いやすい動きです。

.btn-fill-up {
  position: relative;
  background: transparent;
  color: #16a34a;
  border: 2px solid #16a34a;
  overflow: hidden;
  z-index: 0;
}
.btn-fill-up::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #16a34a;
  transition: height 0.3s ease;
  z-index: -1;
}
.btn-fill-up:hover {
  color: #ffffff;
}
.btn-fill-up:hover::before {
  height: 100%; /* 下から上へ塗り上げる */
}

26. 上下から枠線を描くボタン

上の線は左から、下の線は右から。方向を変えると動きにリズムが生まれます。2本の線を::beforeと::afterで作り、transform-originを左右で変えることで、枠が手描きのように描かれていく演出になります。シンプルなのに凝って見えるのが魅力です。

.btn-draw {
  position: relative;
  background: transparent;
  color: #e11d48;
}
/* 上下の線を疑似要素で描く */
.btn-draw::before,
.btn-draw::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e11d48;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.btn-draw::before { top: 0; transform-origin: left; }
.btn-draw::after  { bottom: 0; transform-origin: right; }
.btn-draw:hover::before,
.btn-draw:hover::after {
  transform: scaleX(1);
}

浮く・沈む・拡大を支える transform の基礎

transform（トランスフォーム）は、要素を移動・拡大・回転・傾けるためのCSSです。レイアウトを崩さずに見た目だけ動かせるので、ホバーエフェクトと非常に相性が良いのが特徴です。

.demo {
  /* 移動：右に10px、下に5px */
  transform: translate(10px, 5px);
}
.demo-scale {
  transform: scale(1.1);      /* 1.1倍に拡大 */
}
.demo-rotate {
  transform: rotate(5deg);    /* 5度回転 */
}
/* 複数まとめて指定（順番で結果が変わる点に注意） */
.demo-multi {
  transform: translateY(-4px) scale(1.05);
}

よく使う4つの動きを整理します。

注意点として、transformで動かす前に共通CSSでtransitionを効かせておくこと。そうしないと、動きがカクついて一瞬でワープしたように見えてしまいます。

繰り返す動きは @keyframes とanimationで作る

transitionは「A→B」の1回きりの変化に使います。一方で、ローディングのくるくる回転や、虹色のグラデーションが流れ続けるような繰り返しの動きには@keyframesとanimationを使います。@keyframesで「0%のときはこう、100%のときはこう」と動きの台本を書き、animationでその台本を「何秒かけて・何回・どんな速さで」再生するかを指定するイメージです。

この記事のローディングボタン（29番）や虹色ボタン（30番）は、まさにこの仕組みで動いています。

背景色との相性・ダークモードで気をつけること

ボタンは、それ単体ではなく「置かれる背景の上」で見え方が決まります。白背景で綺麗に見えたネオンボタンが、同じく白い背景では光が目立たない、といったことは珍しくありません。デザインを決めるときは、必ず実際の背景色の上で確認しましょう。

• ネオン・グロー系（16・17番）：暗い背景の上でこそ発光が映える
• グラスモーフィズム（21番）：写真やグラデーションの背景があって初めて成立する
• ふんわりシャドウ（9番）：白背景だと影が見えづらいので、薄いグレー背景と相性が良い
• ソリッド系（1番）：どんな背景でも安定して読めるので万能

また、ダークモードに対応するサイトでは、prefers-color-schemeというメディアクエリで、背景が暗いときだけボタンの色を切り替える、といった調整もできます。初心者のうちは無理に対応しなくても構いませんが、「白背景前提で作った濃い影のボタンが、暗い背景では見えなくなる」ことは頭の片隅に置いておくと安心です。

【浮く・沈む・拡大】transformで動きを付ける

ここからはtransformを主役にした、動きのあるボタンです。

12. ホバーで浮くボタン

translateY(-4px)で持ち上げ、影を強調して浮遊感を出します。「浮く」動きは、影を同時に大きく・濃くすることで説得力が増します。本体だけ動かして影を変えないと、床に張り付いたまま滑るような不自然さが出るので、浮かせるときはbox-shadowもセットで強めるのがコツです。カード型UIとの相性が抜群です。

.btn-lift {
  background-color: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}
.btn-lift:hover {
  /* Y軸マイナスで上に浮かせる＋影を強調 */
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(139, 92, 246, 0.4);
}

13. ホバーで沈むボタン

逆に少し下げて、暗くすることで「押し込まれた」印象にします。浮くボタンと対になるデザインで、filter: brightness()で少し暗くすると沈み込みが強調されます。落ち着いた・真面目な印象を出したいコーポレートサイトなどで使いやすい動きです。

.btn-sink {
  background-color: #0891b2;
  color: #ffffff;
}
.btn-sink:hover {
  /* 下に少し沈める（押し込みの逆） */
  transform: translateY(3px);
  filter: brightness(0.92);
}

14. 拡大ボタン

scale()で全体を拡大。クリック時は少し縮めると押し心地が出ます。拡大率は1.05〜1.08程度の控えめな値がおすすめで、大きくしすぎると隣の要素と重なったり、ガタついた印象になったりします。シンプルながら「反応している」感が明確に伝わるので、汎用的に使える動きです。

.btn-scale {
  background-color: #db2777;
  color: #ffffff;
}
.btn-scale:hover {
  transform: scale(1.06); /* 全体を少し拡大 */
}
.btn-scale:active {
  transform: scale(0.98);
}

24. バウンドボタン（ホバーで跳ねる）

@keyframesで上下の動きを定義し、ホバーで一回だけ再生します。ポップで元気な印象になるので、キャンペーンや子ども向け・エンタメ系のサイトに向いています。跳ね方は@keyframesの数値（何%で何px上がるか）を変えるだけで調整でき、小刻みにすると軽やかに、大きく跳ねさせるとコミカルになります。

.btn-bounce {
  background-color: #f97316;
  color: #ffffff;
}
.btn-bounce:hover {
  animation: bounce 0.5s ease; /* ホバーで一回跳ねる */
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(-3px); }
}

25. 斜め（平行四辺形）ボタン

skewX()でボタン全体を傾け、中の文字だけ逆方向に傾け直して読みやすさを保ちます。そのため、このボタンは文字をspanで囲んで使います。

<a href="#" class="btn btn-skew"><span>斜めボタン</span></a>

.btn-skew {
  background-color: #0d9488;
  color: #ffffff;
  transform: skewX(-8deg); /* 平行四辺形に傾ける */
}
/* 中の文字は元に戻して読みやすくする */
.btn-skew span {
  display: inline-block;
  transform: skewX(8deg);
}
.btn-skew:hover {
  background-color: #0f766e;
  transform: skewX(-8deg) translateY(-2px);
}

27. 3D風チルトボタン

perspectiveとrotateXで、奥に倒れるような立体感を出します。

.btn-3d-tilt {
  background-color: #6d28d9;
  color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-3d-tilt:hover {
  /* 立体的に少し傾ける（擬似3D） */
  transform: perspective(400px) rotateX(12deg);
  box-shadow: 0 10px 18px rgba(109, 40, 217, 0.35);
}

【光沢・ネオン・グロー】光る演出で目を引く

斜めのハイライトを走らせる「光沢スイープ」や、影を色付きでにじませる「ネオン・グロー」は、少し派手にしたいボタンに効果的です。ここぞという主役ボタンに絞って使うと上品にまとまります。

15. 光沢スイープボタン（斜めの光が走る）

::beforeで斜めの半透明ハイライトを作り、ホバーで左から右へ移動させます。金属やガラスの表面を光が滑るような、高級感のある演出です。光が本体からはみ出さないよう、ボタンにoverflow: hidden;を付けるのが必須ポイントです。プレミアム感を出したい購入ボタンや、ブランドサイトの主役ボタンに向いています。

.btn-sweep {
  position: relative;
  background-color: #1e293b;
  color: #ffffff;
  overflow: hidden;
}
.btn-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  /* 斜めの半透明ハイライト */
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-20deg);
}
.btn-sweep:hover::before {
  left: 125%; /* 左から右へ光を走らせる */
  transition: left 0.6s ease;
}

16. ネオンボタン

色付きのbox-shadowを内外に重ねて、ネオン管のような発光を表現します。影の色を背景色ではなく「光らせたい色」にするのがコツで、同じ色の影を2〜3枚重ねると、じわっとにじむネオンらしさが増します。暗い背景のサイトやイベント告知、ゲーム系のUIで強い存在感を出せます。

.btn-neon {
  background-color: transparent;
  color: #22d3ee;
  border: 2px solid #22d3ee;
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
}
.btn-neon:hover {
  color: #0f172a;
  background-color: #22d3ee;
  /* 内外に光をにじませてネオンを表現 */
  box-shadow:
    0 0 12px #22d3ee,
    0 0 24px #22d3ee;
  text-shadow: none;
}

17. グロー（発光）ボタン

ホバー時にぼんやり光を広げるシンプルなグロー。暗い背景でよく映えます。ネオンほど主張が強くなく、ホバーしたときだけふわっと光るので、「押せることをさりげなく強調したい」ボタンにちょうど良い塩梅です。

.btn-glow {
  background-color: #7c3aed;
  color: #ffffff;
  box-shadow: 0 0 0 rgba(124, 58, 237, 0);
}
.btn-glow:hover {
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.7);
}

23. 文字が光るボタン

background-clip: textで文字だけにグラデーションを流し、アニメで輝かせます。文字の色をtransparent（透明）にして、背景のグラデーションを文字の形に切り抜くことで、文字自体がキラキラ光っているように見せる少し高度なテクニックです。ロゴ的な見出しボタンや、特別感を出したい限定バナーのボタンに向いています。

.btn-shine-text {
  background: #0f172a;
  /* 文字自体にグラデーションを流す */
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(90deg, #f9a8d4, #a78bfa, #f9a8d4);
  background-size: 200% auto;
}
.btn-shine-text:hover {
  animation: shine-text 1.2s linear infinite;
}
@keyframes shine-text {
  to { background-position: 200% center; }
}

【アイコン付き】矢印やSVGを添えて意味を伝える

「詳しく見る →」のように、ボタンに矢印やアイコンを添えると、何が起きるか（遷移・ダウンロードなど）が直感的に伝わります。display: inline-flexとgapを使うと、文字とアイコンをきれいに横並びにできます。

18. 矢印アイコン付きボタン（ホバーで矢印が動く）

::afterで矢印を出し、ホバーで矢印だけ少し右に動かして「進む感」を出します。「詳しく見る →」のように遷移を促すリンクボタンにぴったりで、矢印がわずかに動くだけでクリックしたくなる心理的な効果があります。画像を使わずcontent: "→"で文字として矢印を出しているので、色やサイズも文字と一緒に調整できます。

.btn-arrow {
  background-color: #2563eb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 文字と矢印の間隔 */
}
.btn-arrow::after {
  content: "→";
  transition: transform 0.25s ease;
}
.btn-arrow:hover::after {
  transform: translateX(4px); /* 矢印だけ右に動かす */
}

19. SVGアイコン付きボタン（ダウンロード）

アイコンを画像ではなくSVGで入れると、色をcurrentColorで文字色に合わせられて便利です。まずHTMLでSVGをボタンの中に置きます。

<a href="#" class="btn btn-download">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17 7.3 11.7l1.4-1.4L12 13.6V3z" />
    <path d="M5 19h14v2H5z" />
  </svg>
  ダウンロード
</a>

CSSでサイズと色を整えます。

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #059669;
  color: #ffffff;
}
/* SVGはbtn内に直接置く。色は currentColor で文字色に追従 */
.btn-download svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

【質感・特殊】マテリアル・グラス・二重・ローディング

最後に、質感や動きにこだわった応用系をまとめます。Androidでおなじみのリップル風、背景が透けるグラスモーフィズム、影をずらした二重ボタン、処理中を表すローディングボタンなど、実務で「あると便利」な演出です。

20. マテリアル風リップルボタン

クリック中に中央から円が広がる、押した位置に波紋が出るような簡易リップルです。GoogleのマテリアルデザインでおなじみのUIを、JavaScriptなしでCSSだけで近似したものです。厳密なリップル（押した座標から広がる）はJavaScriptが必要ですが、中央から広がるだけなら本記事のようにCSSの疑似要素だけで表現できます。

.btn-ripple {
  position: relative;
  background-color: #4f46e5;
  color: #ffffff;
  overflow: hidden;
}
.btn-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.btn-ripple:active::after {
  /* クリック中に中央から円を広げる（簡易リップル） */
  transform: translate(-50%, -50%) scale(30);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.8s ease;
}

21. グラスモーフィズムボタン

backdrop-filter: blur()で背景をぼかし、半透明にした「すりガラス」風です。背景に写真やグラデーションがあるページで真価を発揮します。逆に、真っ白な背景の上に置くとぼかす対象がないため、ただの薄い半透明ボタンにしか見えません。ヒーローイメージ（大きな背景写真）の上に置くボタンとして使うのが定番です。なおbackdrop-filterは一部の古いブラウザで効かないため、効かなくても読めるよう、背景色や文字色は単体でも成立する組み合わせにしておくと安心です。

.btn-glass {
  /* 背景が透ける半透明ボタン。背景画像の上で映える */
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.28);
}

28. 二重（ずらし影）ボタン

背後にもう一枚ずらして重ね、ホバーでピタッと合わさる遊び心のあるデザインです。背後の色をアクセントカラーにすると、ホバー前は「影」、ホバー後は「一体化」という変化が生まれ、ポップでカジュアルな印象になります。個人サイトやポートフォリオのアクセントに向いています。

.btn-double {
  position: relative;
  background-color: #111827;
  color: #ffffff;
  z-index: 0;
}
.btn-double::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 背後にもう一枚ずらして重ねる */
  background: #f59e0b;
  transform: translate(6px, 6px);
  z-index: -1;
  transition: transform 0.25s ease;
}
.btn-double:hover::before {
  transform: translate(0, 0); /* ホバーでピタッと重なる */
}

29. ローディングボタン（くるくる回る）

回転するスピナーを::beforeで作り、送信処理中などに使います。フォーム送信ボタンを押した瞬間に、このスタイルへ切り替える（クラスを付け替える）ことで、「今、処理中です」という状態をユーザーに伝えられます。反応がないと二重送信されやすいので、送信系のボタンには状態表示があると親切です。

.btn-load {
  background-color: #2563eb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-load::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

30. 虹色アニメーションボタン（再掲）

冒頭でも触れた、グラデーションが自動で流れ続ける派手なボタンです。以上で、基本からアニメーションまで合計30種類のボタンが揃いました。

.btn-rainbow {
  color: #ffffff;
  /* 4色をつなげて左右にアニメーションさせる */
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #6366f1);
  background-size: 300% 100%;
  animation: rainbow 6s linear infinite;
}
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.btn-rainbow:hover {
  filter: saturate(1.3);
}

:hover と :focus-visible の違いを正しく理解する

ボタンの状態を表す代表的な擬似クラスに:hoverと:focus-visibleがあります。見た目は似ていても役割が違うので、両方を意識するとアクセシブルなボタンになります。

重要なのは、スマホやキーボードだけで操作する人には:hoverが届かないことです。そのため、:hoverだけに頼らず、:focus-visibleでもわかるようにするのが基本です。古い:focusはマウスクリック時にも枠が残って邪魔になりがちなので、現在は:focus-visibleを使うのが推奨されます。

おしゃれさと両立させたいアクセシビリティの基本

アクセシビリティとは、目や手の状態、使う端末に関わらず、誰でも操作できるようにする配慮のことです。ボタンは「押されてこそ意味がある」要素なので、見た目と同じくらい大切にしたいポイントです。

• コントラスト：文字と背景の明暗差を十分に取る（薄い灰色に白文字などは読めないので避ける）
• タップ領域：スマホで押しやすいよう、高さ・幅は44px以上を目安にする
• フォーカス表示：:focus-visibleで枠を出し、キーボード利用者に現在地を伝える
• 色だけに頼らない：状態を色の違いだけで示さず、文字やアイコンでも補う

これらをまとめると、次のような土台になります。

.btn {
  /* タップしやすい最小サイズ（44px以上を目安に） */
  min-height: 44px;
  min-width: 44px;
  /* 文字と背景のコントラストを十分に確保する */
  background-color: #1d4ed8; /* 濃い青 */
  color: #ffffff;
}

/* マウス・キーボード両方でわかるフォーカス表示 */
.btn:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

動きが苦手な人への配慮：prefers-reduced-motion

アニメーションは魅力的ですが、動きで気分が悪くなる人もいます。OSの「視差効果を減らす」設定を検知するprefers-reduced-motionを使うと、そうした設定の人にだけ動きを止められます。派手なボタンほど、この配慮を入れておくと安心です。

/* 動きを減らす設定をしているユーザーには
   アニメーションを止める（酔い・負担への配慮） */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
    animation: none;
  }
  .btn:hover {
    transform: none;
  }
}

スマホ対応：レスポンシブなボタンにする

PCではちょうど良くても、スマホだと小さくて押しにくいことがあります。@media（メディアクエリ）で画面幅に応じてスタイルを切り替え、スマホでは横幅いっぱいの押しやすいボタンにするのが定番です。

/* スマホでは横幅いっぱいの押しやすいボタンにする */
@media (max-width: 600px) {
  .btn {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 17px;
  }
}

目安として、スマホでは主役ボタンを幅100%にすると迷わず押してもらえます。並列に置くサブボタンは、縦積みにするか、少し小さめにしてメリハリを付けましょう。

よくつまずく「ボタンの中央寄せ」を解決する

「ボタンを画面の真ん中に置きたいのに、左に寄ってしまう」——これは初心者が最もよくつまずく点です。原因は、ボタンがinline-block（中身の幅しかない要素）だからです。解決策は主に3つあります。

/* 親要素をflexにして中央寄せ（推奨） */
.btn-wrap {
  display: flex;
  justify-content: center; /* 横方向の中央 */
}

/* テキストとして中央寄せする場合（inline要素向け） */
.btn-wrap-inline {
  text-align: center;
}

/* ブロック要素なら左右autoでも中央に置ける */
.btn-block {
  display: block;
  width: 240px;
  margin: 0 auto;
}

1. 親要素をflexにする：display:flex; justify-content:center;（最も確実で今風）
2. text-alignで中央寄せ：親にtext-align:center;（手軽だがinline要素向け）
3. margin autoで中央寄せ：ボタンをdisplay:blockにして幅を決め、margin:0 auto;

コピペしたボタンを自分好みに直す5ステップ

この記事のコードは、そのまま貼っても使えますが、サイトのブランドカラーに合わせて微調整すると一気に「自分のサイトのボタン」になります。難しく考えず、次の順番でいじれば失敗しません。

1. 色を変える：background-colorとcolorを自分のブランドカラーに置き換える
2. ホバー色を決める：ホバー時の色は元の色より少し濃く（または薄く）する
3. 角丸を調整：border-radiusで印象を変える（0=硬派、大きい=柔らか）
4. 余白を調整：paddingでボタンの大きさと押しやすさを整える
5. 動きの速さ：transitionの秒数で、キビキビ／ゆったりを調整する

ポイントは一度に全部変えず、1項目ずつ変えて確認すること。崩れたときに、どの変更が原因か切り分けやすくなります。

ボタンの色を決めるときの考え方

ボタンの印象は、動きよりもまず「色」で決まります。おしゃれなボタンにしたいなら、色数を絞り、役割ごとに色を決めるのが近道です。初心者がやりがちなのは、目立たせたい一心で原色を何色も使ってしまい、逆にどこを押せばいいか分からなくなるパターンです。

メインカラー・アクセントカラー・無彩色の3層で考える

サイトのボタン色は、次の3層で整理すると迷いません。この考え方はブランドデザインの現場でも基本になっているものです。

ポイントは、1つの画面に主役ボタンは基本1つにすること。主役が複数あると視線が分散し、結局どれも押されにくくなります。

ホバー色は「同じ色の濃さ違い」で作るとまとまる

ホバー時の色は、まったく別の色に変えるより、元の色を少し濃く（暗く）したものを使うと統一感が出ます。この記事のサンプルでも、たとえば青の#2563ebに対してホバーは少し暗い#1d4ed8を使っています。カラーコードの明るさだけを下げるイメージで選ぶと、簡単にまとまった配色になります。

また、文字色と背景色の明暗差（コントラスト）は必ず確保してください。薄い色の背景に白文字、濃い背景に濃い文字といった組み合わせは、健常者でも読みにくく、色覚特性のある人にはさらに厳しくなります。迷ったら「濃い背景＋白文字」「白背景＋濃い文字」の王道から始めるのが安全です。

押されるボタンにする「文言（ラベル）」の作り方

デザインと同じくらい成果を左右するのが、ボタンに書く文言（ラベル）です。どれだけおしゃれでも、「送信」「クリック」だけでは、押した先に何が起きるか伝わりません。WithCodeの制作現場では、次のポイントを意識してラベルを決めています。

• 動詞＋得られるもので書く：「登録する」より「無料で登録する」の方が押しやすい
• 一人称・行動視点にする：「資料をもらう」など、押した人が得することを書く
• 曖昧語を避ける：「送信」「決定」だけでなく、何を送るのか・決めるのかを添える
• 長すぎない：スマホで2行に折り返すと読みにくいので、10〜15文字程度を目安に

同じ機能でも、文言の違いで印象がどう変わるかを比較します。

文言に矢印（→）やアイコンを添えると、より「押せる」感が出ます。本記事の18番（矢印付き）や19番（SVGアイコン付き）は、まさにこの目的で使えるデザインです。

30種類から「どれを使うか」を選ぶ早見表

たくさんあると、かえってどれを使うか迷うものです。そこで、目的・サイトの雰囲気から選べる早見表を用意しました。まずはここで当たりを付け、気に入ったものを共通CSSと一緒にコピペしてみてください。

迷ったら、主役は「1・3・5」、サブは「2・9」から選ぶのがおすすめです。この組み合わせなら、どんなジャンルのサイトでも大きく外しません。

実際にコピペするときの手順（貼る順番）

最後に、この記事のコードを自分のサイトで使うときの具体的な手順をまとめます。順番を守れば、初めての人でも迷いません。

1. HTMLに<button class="btn btn-solid">…</button>のようにbtn＋種類のクラスを書く
2. CSSファイル（またはstyleタグ）の先頭に、共通のリセットCSSを一度だけ貼る
3. その下に、使いたい種類の装飾CSSを貼る
4. 表示を確認し、色・角丸・余白を「カスタマイズ5ステップ」で自分好みに調整する
5. スマホ表示を確認し、必要ならレスポンシブCSSを追加する

CSSを書く場所が分からない場合は、HTMLの<head>内に<style> ここにCSS </style>と書けばまず動きます。慣れてきたら、CSSは別ファイル（style.css）に分けると管理が楽になります。

初心者がやりがちな失敗と回避策

WithCodeの受講生からよく寄せられる「うまくいかない」を、原因と対策の形で整理しました。

特に多いのが1行目です。コピペしたのにヌルッと動かない原因は、ほぼtransitionの書き忘れ。この記事は共通CSSにtransition: all 0.25s ease;を入れてあるので、土台のCSSを貼り忘れていないか最初に確認してください。

よくある質問

Q. ボタンをクリックしても反応しません。なぜですか？

見た目のCSSと、実際の動作（リンク遷移やフォーム送信）は別物です。aタグならhrefが正しいか、buttonならtypeやJavaScriptのイベントが設定されているかを確認してください。また、::beforeや::afterで作った装飾がボタンの上に重なり、クリックを邪魔している場合もあります。その際は装飾側にpointer-events: none;を付けると解決します。

Q. border-radiusを指定しても角丸になりません。

背景や疑似要素、内側の画像が角の外にはみ出していると、丸みが隠れて見えます。ボタン本体にoverflow: hidden;を付けて、はみ出した部分を切り取ってください。光沢スイープやリップルなど疑似要素を使うボタンでは、この指定がほぼ必須です。

Q. ボタンを中央に配置できません。

ボタンは中身の幅しか持たないinline-block要素のため、そのままでは左に寄ります。親要素にdisplay:flex; justify-content:center;を付けるのが最も確実です。詳しくは本文の「ボタンの中央寄せ」セクションを参照してください。

Q. ホバーエフェクトがスマホで効きません。

:hoverはマウスカーソルを前提にした状態のため、タッチ操作のスマホでは基本的に発火しません。スマホでは「押した瞬間」の:activeで変化を付けるか、ホバーに頼らないデザインにするのが安全です。重要な情報をホバー時にしか表示しない作りは避けましょう。

Q. buttonタグとaタグ、どちらを使うべきですか？

遷移先のページがある「リンク」ならaタグ、フォーム送信や画面内の操作など「動作」ならbuttonタグを使うのが基本です。見た目は同じ.btnクラスで揃えられますが、役割に合ったタグを選ぶことがアクセシビリティとSEOの両面で大切です。

Q. 影（box-shadow）の値の意味が分かりません。

box-shadowは「横方向のずれ／縦方向のずれ／ぼかし／広がり／色」の順で指定します。たとえば0 6px 0 #b91c1cなら「横0・下6px・ぼかしなし・色は暗い赤」で、くっきりした厚みになります。ぼかしを大きくすると、ふんわりした浮遊感になります。

Q. グラデーションの色がうまく決められません。

初心者のうちは、同系色（青→水色など）や隣り合う色相でまとめると失敗しにくいです。反対色を強く混ぜると濁って見えることがあります。まずは2色から始め、慣れてきたら3色以上や角度の変更に挑戦するのがおすすめです。

Q. アニメーションが多いと重くなりませんか？

動かすプロパティ選びが大切です。transformとopacityは描画負荷が軽く、多用してもカクつきにくいです。逆にwidthやmarginを毎フレーム変えるアニメーションは重くなりがちなので、動かす目的ならtransformを優先しましょう。

Q. 30種類のボタンを全部同じページで使ってもいいですか？

技術的には問題ありませんが、デザインの観点ではおすすめしません。1つのサイトで使うボタンのスタイルは、主役・サブ・注意喚起など役割ごとに2〜3種類に絞ると統一感が出ます。この記事は「引き出し集」なので、その中からサイトに合うものを選んで使うのが正解です。

まとめ

この記事では、コピペで使えるCSSボタンを30種類、タイプ別に紹介しました。共通の.btnクラスで土台を作り、装飾を1つずつ足していく作り方を理解すれば、コピペしたコードが崩れることはなくなり、自分好みへの調整も自在にできます。見た目のバリエーションはbackground・color・border・border-radius・box-shadowで作り、動きの心地よさはtransitionとtransformで決まります。そして、おしゃれさと同じくらい、コントラスト・タップ領域・フォーカス表示といったアクセシビリティが大切だという点も、ぜひ覚えておいてください。

・土台を先に作る：共通の.btnで受け皿を用意し、種類ごとの装飾を足すと崩れない
・動きはtransition＋transform：0.2〜0.3秒の変化で上品に、transformは軽くて快適
・おしゃれ＋使いやすさ：コントラスト・44pxのタップ領域・focus-visibleで誰でも押せるボタンに

「コピペはできたけれど、仕組みまで理解して自由にデザインできるようになりたい」——そう感じたら、WithCodeで基礎から手を動かして学ぶのが一番の近道です。HTML/CSSの土台が身につけば、ボタンだけでなくサイト全体を思い通りにデザインできるようになります。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！