コピペで使えるCSSボタンデザイン集

ボタンはページの中でいちばん「押してほしい」場所なのに、素のままだと灰色で味気ない——この記事は、そのまま使えるボタンのデザインを動くデモつきで10個まとめました。コピペして、色と文言を自分のページに合わせるだけです。

まずは共通の下ごしらえ

ブラウザ標準のボタンには、灰色の枠や小さな文字がついたままです。最初にこの.btnで素の見た目をリセットしておくと、どのデザインもきれいに乗ります。

.btn {
  display: inline-block;
  padding: 12px 28px;
  font: inherit;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

以降のボタンは、この.btnに色や動きのクラスを重ねる形で使います。HTMLは<button class="btn primary">のように、クラスを2つ付けるだけです。

基本の型

基本のボタン

まずはこれ。はっきりした色＋白文字＋角丸——どのサイトでも通用する基本形です。

.primary {
  background: #ff8a3d;
  color: #fff;
}

backgroundの色を1つ変えるだけで、サイトの雰囲気に合わせられます。

ピル型ボタン

角丸を最大にすると、カプセルのようなやわらかい形になります。やさしい印象にしたいサイトの定番です。

.pill {
  border-radius: 999px;
}

999pxは「これ以上丸くならないくらい大きな値」の意味。高さが変わっても常に完全な半円になります。

色と質感

グラデーションボタン

単色より少しリッチに見せたいときはグラデーション。2色を近い色相でつなぐと上品にまとまります。

.gradient {
  background: linear-gradient(135deg, #ff8a3d, #ff5e78);
  color: #fff;
}

135degは色の流れる向き（左上→右下）。2つの色コードを差し替えて、自分の配色に合わせてください。

アウトラインボタン

塗りつぶさず枠線だけの、ひかえめなボタン。「キャンセル」など、主役ではない2番手のボタンによく使います。マウスを乗せると塗りつぶしに変わります。

.outline {
  background: #fff;
  color: #ff8a3d;
  border: 2px solid #ff8a3d;
  transition: background 0.2s, color 0.2s;
}
.outline:hover {
  background: #ff8a3d;
  color: #fff;
}

ポップな枠つきボタン

黒い枠＋ずらした影で、マンガのようなポップな質感に。押すと影のぶんだけ沈んで、「押した感」がしっかり出ます。

.pop {
  background: #ffd93d;
  color: #333;
  border: 2px solid #333;
  box-shadow: 4px 4px 0 #333;
}
.pop:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

影を「ぼかし0」でずらすのがコツ。:active（押している間）に影のぶんだけ移動させると、影の位置へ沈みこみます。

動きで気持ちよく

ふわっと浮くボタン

マウスを乗せると少し浮き上がり、影が伸びる——「押せますよ」の合図として、いちばん使いやすい動きです。

.lift {
  transition: transform 0.2s, box-shadow 0.2s;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255, 138, 61, 0.45);
}

影の色はボタンと同系色の半透明にすると、光がにじむようにきれいに見えます。

ぐっと沈むボタン

下側に厚みの影をつけておき、押した瞬間に沈ませる立体ボタン。ゲームっぽい元気な画面にぴったりです。

.press {
  background: #2ec46f;
  color: #fff;
  box-shadow: 0 5px 0 #1d9d55;
}
.press:active {
  transform: translateY(5px);
  box-shadow: none;
}

厚みの影は「ボタンより少し暗い同系色」にすると自然です。

矢印がすっと動くボタン

「つぎへ」「もっと見る」のような誘導ボタンは、マウスを乗せたとき矢印だけ先に動くと、行き先があるように見えます。

.arrow span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s;
}
.arrow:hover span {
  transform: translateX(4px);
}

HTMLは矢印を<span>で包んでおくだけ（つぎへ<span>→</span>）。動かすのはその<span>だけです。

光が走るボタン

マウスを乗せると、表面を光がさっと走り抜けます。ここぞという主役ボタンに1つだけ使うと効果的です。

.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-25deg);
}
.shine:hover::after {
  animation: shine 0.6s;
}
@keyframes shine {
  to { left: 125%; }
}

仕組みは「ボタンの外に隠しておいた光の帯を、ホバーで右端まで走らせる」。overflow: hiddenがあるので、はみ出た部分は見えません。

リンクをボタンに見せる

「押したらページを移動する」ものの正体はリンク（<a>）です。<a>にもここまでのクラスはそのまま使えますが、下線を消す1行だけ追加が必要です。

a.btn {
  text-decoration: none;
}

使い分けの目安は、ページを移動するなら<a>、その場で何かが起きる（送信・再生など）なら<button>です。

ボタンが変になるときのチェックリスト

コピペしたのに見た目がおかしいときは、たいてい次のどれかです。

• 灰色の枠が残っている → border: noneを入れましたか？（ブラウザ標準の枠が残っています）
• ボタンの文字だけフォントがちがう → ボタンは周りのフォントを引き継ぎません。font: inheritで解決します
• リンクに下線が出る → <a>に使うときはtext-decoration: noneを追加
• マウスを乗せても矢印カーソルのまま → cursor: pointerで「押せる」合図を出す

まとめ

1. 最初に.btnで下ごしらえ（枠・フォント・カーソルのリセット）をしてから、色や動きのクラスを重ねる
2. 主役のボタンは目立つ色＋ホバーの動き1つ、2番手はアウトラインでひかえめに
3. ページ移動は<a>、その場の動作は<button>——見た目は同じクラスで共有できる

気に入ったものを1つ選んで色を差し替えるだけで、ページの「押してほしい場所」が見ちがえます。