サイトやLPにボタンを1つ置きたいだけなのに、CSSを一から書くのは面倒だと感じたことはありませんか。
この記事では、コピペするだけでそのまま使えるHTML・CSSのボタンを20個まとめました。
シンプルな塗りつぶしから、グラデーション、ネオン風、立体的に見えるものまで、幅広いテイストを用意しています。
1個ずつ独立したコードになっているので、必要なものだけ選んで、自分のサイトに貼り付けてください。
20個もあると、どれから見ればいいか迷っちゃうね。
最初に使い方だけ説明するから、そのあとは好きなところから選んで見てね。
使い方｜コピー＆ペーストするだけ
使い方は簡単です。
それぞれのコードには <style> と <button>（または <a>）がセットになっています。
コード全体をコピーして、HTMLファイルの好きな場所に貼り付けるだけで、見本と同じ見た目のボタンが表示されます。
クラス名は他のスタイルとぶつからないよう「kts-」から始まる名前にしてありますが、複数のボタンを1つのページに貼る場合は、念のためクラス名が重複していないか確認してください。
文字やリンク先、色は、コード内の該当箇所を書き換えるだけで変更できます。
01. シンプル塗りつぶしボタン
最も基本の形です。まずはこの1つを覚えておけば、色を変えるだけで幅広く使い回せます。
実際の見た目
コピー用コード
<style> .kts-btn01 { display: inline-block; padding: 12px 28px; background: #2E6F5E; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } .kts-btn01:hover { background: #24594B; } .kts-btn01:focus-visible { outline: 3px solid #A9D6C6; outline-offset: 2px; } </style>
<button class="kts-btn01">送信する</button>02. アウトラインボタン
枠線だけのシンプルなボタンです。背景に置いても主張しすぎないので、サブボタンに向いています。
実際の見た目
コピー用コード
<style> .kts-btn02 { display: inline-block; padding: 11px 27px; background: transparent; color: #2E6F5E; font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid #2E6F5E; border-radius: 6px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .kts-btn02:hover { background: #2E6F5E; color: #fff; } .kts-btn02:focus-visible { outline: 3px solid #A9D6C6; outline-offset: 2px; } </style>
<button class="kts-btn02">詳しく見る</button>03. 角丸ピル型ボタン
両端を大きく丸めた、やわらかい印象のボタンです。予約や申込みボタンに向いています。
実際の見た目
コピー用コード
<style> .kts-btn03 { display: inline-block; padding: 13px 32px; background: #D97757; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border: none; border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .kts-btn03:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(217,119,87,0.35); } .kts-btn03:focus-visible { outline: 3px solid #F2C9B8; outline-offset: 2px; } </style>
<button class="kts-btn03">今すぐ予約する</button>04. グラデーションボタン
2色をなめらかにつないだ、目を引くボタンです。トップページの主役ボタンにおすすめです。
実際の見た目
コピー用コード
<style> .kts-btn04 { display: inline-block; padding: 13px 30px; background: linear-gradient(135deg, #6C63FF, #3F8CFF); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border: none; border-radius: 8px; cursor: pointer; transition: filter 0.2s ease; } .kts-btn04:hover { filter: brightness(1.08); } .kts-btn04:focus-visible { outline: 3px solid #C6D4FF; outline-offset: 2px; } </style>
<button class="kts-btn04">無料で始める</button>05. ふわっと影が浮くボタン
普段は控えめな影ですが、ホバーすると影が広がって浮き上がって見えます。
実際の見た目
コピー用コード
<style> .kts-btn05 { display: inline-block; padding: 12px 28px; background: #fff; color: #333; font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid #E4E4E4; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.08); transition: box-shadow 0.25s ease, transform 0.25s ease; } .kts-btn05:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.12); transform: translateY(-3px); } .kts-btn05:focus-visible { outline: 3px solid #B9C8E0; outline-offset: 2px; } </style>
<button class="kts-btn05">もっと見る</button>06. 矢印アイコン付きボタン
テキストの右に矢印を添えたボタンです。次のページへ進む案内に向いています。
実際の見た目
コピー用コード
<style> .kts-btn06 { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #1F2933; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border: none; border-radius: 6px; cursor: pointer; transition: gap 0.2s ease; } .kts-btn06:hover { gap: 14px; } .kts-btn06:focus-visible { outline: 3px solid #A9B7C6; outline-offset: 2px; } </style>
<button class="kts-btn06">次のステップへ<span aria-hidden="true">→</span></button>07. ニューモーフィズムボタン
背景と同系色の凹凸で立体感を出す、やわらかい質感のボタンです。淡い背景色と組み合わせて使います。
実際の見た目
コピー用コード
<style> .kts-btn07-wrap { background: #E8ECEF; padding: 20px; display: inline-block; border-radius: 12px; } .kts-btn07 { padding: 12px 28px; background: #E8ECEF; color: #45525E; font-size: 16px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; box-shadow: 6px 6px 12px #c7ccd0, -6px -6px 12px #ffffff; transition: box-shadow 0.2s ease; } .kts-btn07:hover { box-shadow: 3px 3px 6px #c7ccd0, -3px -3px 6px #ffffff; } .kts-btn07:active { box-shadow: inset 4px 4px 8px #c7ccd0, inset -4px -4px 8px #ffffff; } </style> <div class="kts-btn07-wrap">
<button class="kts-btn07">保存する</button></div>08. ガラス風（グラスモーフィズム）ボタン
半透明でぼかしを効かせた、ガラスのような質感のボタンです。写真や色付き背景の上で映えます。
実際の見た目
コピー用コード
<style> .kts-btn08-wrap { background: linear-gradient(135deg, #667eea, #764ba2); padding: 24px; border-radius: 12px; display: inline-block; } .kts-btn08 { padding: 12px 28px; background: rgba(255,255,255,0.18); color: #fff; font-size: 16px; font-weight: 600; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: background 0.2s ease; } .kts-btn08:hover { background: rgba(255,255,255,0.3); } </style> <div class="kts-btn08-wrap">
<button class="kts-btn08">続きを読む</button></div>09. 枠線が伸びるアニメーションボタン
ホバーすると、下の線が左から右へ伸びていくアウトラインボタンです。
実際の見た目
コピー用コード
<style> .kts-btn09 { position: relative; display: inline-block; padding: 12px 26px; background: transparent; color: #1F2933; font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid #D8DCE1; border-radius: 6px; overflow: hidden; cursor: pointer; } .kts-btn09::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 100%; background: #1F2933; transition: width 0.3s ease; z-index: 0; } .kts-btn09 span { position: relative; z-index: 1; transition: color 0.3s ease; } .kts-btn09:hover::after { width: 100%; } .kts-btn09:hover span { color: #fff; } </style>
<button class="kts-btn09"><span>お問い合わせ</span></button>10. 下線がスライドするテキストボタン
ボタンというよりリンクに近い形です。ホバーすると下線がスッと現れます。
実際の見た目
利用規約を見るコピー用コード
<style> .kts-btn10 { position: relative; display: inline-block; padding-bottom: 4px; color: #2E6F5E; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; } .kts-btn10::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #2E6F5E; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .kts-btn10:hover::after { transform: scaleX(1); } </style>
<a class="kts-btn10" href="#">利用規約を見る</a>11. ホバーで拡大するボタン
カーソルを合わせると、少しだけ大きくなって反応が伝わるボタンです。
実際の見た目
コピー用コード
<style> .kts-btn11 { display: inline-block; padding: 12px 28px; background: #3F8CFF; color: #fff; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease; } .kts-btn11:hover { transform: scale(1.06); } .kts-btn11:active { transform: scale(0.97); } </style>
<button class="kts-btn11">カートに入れる</button>12. 押し込み感のある立体ボタン
下に厚みを付けて、クリックすると沈み込むように見える立体的なボタンです。
実際の見た目
コピー用コード
<style> .kts-btn12 { display: inline-block; padding: 12px 28px; background: #FFB020; color: #4A2E00; font-size: 16px; font-weight: 700; border: none; border-radius: 8px; box-shadow: 0 6px 0 #C98600; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; } .kts-btn12:active { transform: translateY(6px); box-shadow: 0 0 0 #C98600; } </style>
<button class="kts-btn12">今すぐ購入</button>13. ネオン風ボタン
暗い背景の上で光って見える、ネオンサインのようなボタンです。
実際の見た目
コピー用コード
<style> .kts-btn13-wrap { background: #0D1117; padding: 24px; border-radius: 12px; display: inline-block; } .kts-btn13 { padding: 12px 28px; background: transparent; color: #4CE0D2; font-size: 16px; font-weight: 600; border: 2px solid #4CE0D2; border-radius: 6px; cursor: pointer; text-shadow: 0 0 6px rgba(76,224,210,0.8); box-shadow: 0 0 8px rgba(76,224,210,0.6), inset 0 0 8px rgba(76,224,210,0.2); transition: box-shadow 0.2s ease; } .kts-btn13:hover { box-shadow: 0 0 16px rgba(76,224,210,0.9), inset 0 0 12px rgba(76,224,210,0.4); } </style> <div class="kts-btn13-wrap">
<button class="kts-btn13">ENTER</button></div>14. グラデーション枠線ボタン
枠線だけにグラデーションを使った、さりげなく華やかなボタンです。
実際の見た目
コピー用コード
<style> .kts-btn14 { display: inline-block; padding: 11px 27px; background: #fff; color: #333; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #FF7A7A, #7A7AFF); background-origin: border-box; background-clip: padding-box, border-box; transition: color 0.2s ease; } .kts-btn14:hover { color: #7A5AFF; } </style>
<button class="kts-btn14">プランを見る</button>15. 無効化（disabled）状態のボタン
押せない状態を伝えるためのボタンです。フォームの入力が終わるまで押せないようにする時などに使います。
実際の見た目
コピー用コード
<style> .kts-btn15 { display: inline-block; padding: 12px 28px; background: #D8DCE1; color: #8A94A0; font-size: 16px; font-weight: 600; border: none; border-radius: 6px; cursor: not-allowed; } </style>
<button class="kts-btn15" disabled>送信する</button>16. 通知バッジ付きボタン
件数などを右上の丸いバッジで知らせるボタンです。カートや通知の確認に使えます。
実際の見た目
コピー用コード
<style> .kts-btn16 { position: relative; display: inline-block; padding: 12px 28px; background: #1F2933; color: #fff; font-size: 16px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; } .kts-btn16 .badge { position: absolute; top: -8px; right: -8px; background: #E4572E; color: #fff; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px; border-radius: 999px; text-align: center; padding: 0 4px; } </style>
<button class="kts-btn16">カート<span class="badge">3</span></button>17. 斜め2色分割ボタン
1つのボタンを斜めに2色で分けた、遊び心のあるデザインです。
実際の見た目
コピー用コード
<style> .kts-btn17 { display: inline-block; padding: 12px 28px; color: #fff; font-size: 16px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; background: linear-gradient(115deg, #2E6F5E 50%, #3F8CFF 50%); transition: filter 0.2s ease; } .kts-btn17:hover { filter: brightness(1.1); } </style>
<button class="kts-btn17">キャンペーン詳細</button>18. ロングシャドウボタン
斜め下に長く影を伸ばした、レトロで力強い印象のボタンです。
実際の見た目
コピー用コード
<style> .kts-btn18 { display: inline-block; padding: 12px 28px; background: #FFD23F; color: #3A2E00; font-size: 16px; font-weight: 700; border: none; border-radius: 4px; cursor: pointer; box-shadow: 1px 1px 0 #E0B400, 2px 2px 0 #E0B400, 3px 3px 0 #E0B400, 4px 4px 0 #E0B400, 5px 5px 0 #E0B400, 6px 6px 0 #E0B400; transition: transform 0.15s ease, box-shadow 0.15s ease; } .kts-btn18:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #E0B400, 2px 2px 0 #E0B400, 3px 3px 0 #E0B400; } </style>
<button class="kts-btn18">エントリーする</button>19. 光沢感のあるグロッシーボタン
上半分に光を当てたような、つやのあるボタンです。
実際の見た目
コピー用コード
<style> .kts-btn19 { display: inline-block; padding: 12px 28px; color: #fff; font-size: 16px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; background: linear-gradient(180deg, #5FA8FF 0%, #2E6FD9 50%, #2A5FBD 51%, #24509E 100%); box-shadow: 0 4px 10px rgba(46,111,217,0.4); transition: filter 0.2s ease; } .kts-btn19:hover { filter: brightness(1.08); } </style>
<button class="kts-btn19">アプリをダウンロード</button>20. 矢印がスライドするCTAボタン
ホバーすると、右端の矢印だけがスッと右に動く、控えめなアクセントのCTAボタンです。
実際の見た目
コピー用コード
<style> .kts-btn20 { display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; background: #1F2933; color: #fff; font-size: 16px; font-weight: 600; border: none; border-radius: 999px; cursor: pointer; overflow: hidden; } .kts-btn20 .arrow { display: inline-block; transition: transform 0.25s ease; } .kts-btn20:hover .arrow { transform: translateX(6px); } </style>
<button class="kts-btn20">資料をダウンロード<span class="arrow" aria-hidden="true">→</span></button>カスタマイズの小ワザ
- 色を変えたい時は、コード内の色コード（#で始まる部分）を書き換えるだけで反映されます。
- 文字を変えたい時は、<button>や<a>タグの中に書かれている文章を書き換えてください。
- リンクとして使いたい時は、<button>タグを<a href=”リンク先”>に置き換えると、リンクボタンとして機能します。
- キーボード操作をする人のために、focus-visibleの枠線（アウトライン）は消さずに残しておくことをおすすめします。
- 背景色と文字色の組み合わせによっては、文字が読みにくくなることがあるため、実際の背景で見え方を確認してください。
まとめ｜雰囲気別ボタン早見表
| 雰囲気 | 該当するボタン |
|---|---|
| シンプル・定番 | 01, 02, 03, 15 |
| 目を引く・華やか | 04, 13, 14, 17, 19 |
| 立体的・質感重視 | 07, 08, 12, 18, 19 |
| 動きで魅せる | 05, 06, 09, 10, 11, 20 |
| 機能を伝える | 15, 16 |
こんなに種類があると、サイトの雰囲気に合わせて選べそうだね！
うん、まずは1〜2個試してみて。気に入ったら、色だけ自分のサイトに合わせて変えてみてね。
20個のボタンは、色やアイコン、動きの付け方でそれぞれ違う印象になる。まずは目的に近いものを1つ選び、色や文字だけ自分のサイトに合わせて調整するのが始めやすい。
