コピペで使えるおしゃれなCSSボタンのサンプル集。ホバーで動きを確認し、シャッフルで色・角丸・余白のバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-btn-gradient 形式です。
該当するパーツが見つかりませんでした。
.bnto-btn-gradient { background: linear-gradient(120deg, hsl(43 100% 50%), hsl(5 100% 65%)); color: #fff; border: none; padding: 13px 28px; border-radius: 30px; box-shadow: 0 8px 20px hsl(5 100% 65% / 0.42); transition: transform .2s, box-shadow .2s; } .bnto-btn-gradient:hover { transform: translateY(-3px); }
<button class="bnto-btn-gradient">送信する</button>
グラデの角度は 120deg の部分で調整。90deg で左→右、180deg で上→下になります。box-shadow の色をグラデの主要色に合わせると、浮いているような一体感が出ます。
.bnto-btn-3d { background: hsl(5 90% 62%); color: #fff; border: none; padding: 13px 28px; border-radius: 14px; box-shadow: 0 6px 0 hsl(5 66% 51%); transition: transform .1s, box-shadow .1s; } .bnto-btn-3d:active { transform: translateY(6px); box-shadow: 0 0 0; }
<button class="bnto-btn-3d">ポチッと</button>
影の色は本体色より少し暗い色にすると自然です。押し込み量を変えたいときは box-shadow の 6px と :active の translateY(6px) を同じ値で揃えてください。
.bnto-btn-outline { background: transparent; color: hsl(5 100% 65%); border: 2.5px solid hsl(5 100% 65%); padding: 11px 26px; border-radius: 30px; transition: background .2s, color .2s; } .bnto-btn-outline:hover { background: hsl(5 100% 65%); color: #fff; }
<button class="bnto-btn-outline">詳しく見る</button>
メインCTAの隣に置く「サブボタン」に最適。塗りボタンとペアで使うと視線誘導がしやすくなります。CSS変数で色を1か所にまとめると管理が楽です。
.bnto-btn-ghost { background: hsl(5 100% 65% / 0.14); color: hsl(5 100% 65%); border: none; padding: 13px 26px; border-radius: 14px; transition: background .2s; } .bnto-btn-ghost:hover { background: hsl(5 100% 65% / 0.24); }
<button class="bnto-btn-ghost">キャンセル</button>
「キャンセル」「戻る」など主張しすぎたくない操作にぴったり。背景の透明度（/ 0.14）を上げるほど存在感が増します。
.bnto-btn-arrow { display: inline-flex; align-items: center; gap: 8px; background: hsl(30 12% 15%); color: #fff; border: none; padding: 13px 26px; border-radius: 14px; } .bnto-btn-arrow .ar { transition: transform .2s; } .bnto-btn-arrow:hover .ar { transform: translateX(5px); }
<!-- 矢印は span で囲む（必須） --> <button class="bnto-btn-arrow"> 次へ進む <span class="ar">→</span> </button>
矢印部分は <span class="ar"> で囲むのを忘れずに。「→」の代わりにSVGアイコンを入れても同じように動きます。
/* 背景色 #ECE6DA の上で使う */ .bnto-btn-neumorphic { background: #ECE6DA; color: #7a7264; border: none; padding: 14px 28px; border-radius: 16px; box-shadow: 6px 6px 12px #cfc8ba, -6px -6px 12px #ffffff; } .bnto-btn-neumorphic:active { box-shadow: inset 4px 4px 8px #cfc8ba, inset -4px -4px 8px #ffffff; }
<button class="bnto-btn-neumorphic">ニューモーフ</button>
ニューモーフィズムは「ボタンと背景が同じ色」であることが命。ページの背景色を変えたら、ボタンの background と影の明暗2色も合わせて調整してください。
/* 暗い背景の上で映えます */ .bnto-btn-glow { background: hsl(258 47% 56%); color: #fff; border: none; padding: 13px 28px; border-radius: 30px; box-shadow: 0 0 20px hsl(258 47% 56% / 0.72); transition: box-shadow .25s; } .bnto-btn-glow:hover { box-shadow: 0 0 34px hsl(258 47% 56% / 0.92); }
<button class="bnto-btn-glow">グロー</button>
白背景だと光がほぼ見えません。ダークセクションやヒーローエリアなど、暗い背景の上で使うのがおすすめです。
.bnto-btn-icon { display: inline-flex; align-items: center; gap: 9px; background: hsl(119 31% 51%); color: #fff; border: none; padding: 13px 24px; border-radius: 14px; }
<!-- svg は好きなアイコンに差し替え --> <button class="bnto-btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.51 4.04 3 5.5l7 7Z"/></svg> お気に入り </button>
display: inline-flex と gap でアイコンと文字の間隔を管理しています。アイコンサイズは 14〜18px がバランス良好です。
.bnto-btn-shine { position: relative; overflow: hidden; background: hsl(202 73% 56%); color: #fff; border: none; padding: 13px 30px; border-radius: 30px; } .bnto-btn-shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); transition: left .6s; } .bnto-btn-shine:hover::after { left: 140%; }
<button class="bnto-btn-shine">ホバーで光る</button>
光の帯は ::after 疑似要素なので、HTMLは1行のままでOK。光る速さは transition: left .6s の数値で調整できます。
.bnto-btn-pill { background: hsl(327 60% 56%); color: #fff; border: none; padding: 12px 32px; border-radius: 999px; box-shadow: 0 6px 18px hsl(327 60% 56% / 0.34); transition: transform .15s, box-shadow .2s; } .bnto-btn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 24px hsl(327 60% 56% / 0.46); }
<button class="bnto-btn-pill">フォロー</button>
border-radius: 999px は高さに関係なく完全な丸角になる定番テクニック。SNS系のフォローボタンやタグ風UIと好相性です。
.bnto-btn-soft { background: #fff; color: hsl(258 47% 56%); border: none; padding: 13px 26px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.1); transition: transform .15s, box-shadow .2s; } .bnto-btn-soft:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
<button class="bnto-btn-soft">詳細を見る</button>
白ボタンは薄い色の背景に置くと輪郭がぼやけます。色付きセクションの上か、薄いグレー背景の上で使うと影が生きます。
.bnto-btn-block { display: block; width: 100%; background: hsl(150 58% 44%); color: #fff; border: none; padding: 15px 0; border-radius: 12px; font-weight: 800; transition: filter .2s; } .bnto-btn-block:hover { filter: brightness(1.08); }
<button class="bnto-btn-block">送信する</button>
フォームの送信ボタンやスマホ表示のCTAに最適。親要素の幅いっぱいに広がるので、max-width を親側で制御すると使いやすいです。
ボタンはWebサイトの中で最もクリックされるパーツであり、コンバージョン（申し込み・購入・問い合わせ）に直結する重要なUI要素です。このページでは、HTMLとCSSをコピー&ペーストするだけで使えるボタンデザインを12種類掲載しています。すべて画像を使わないピュアCSSなので、表示が速く、色やサイズの変更も自由自在です。
実装はシンプルで、CSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけ。クラス名はすべて .bnto-btn-〇〇 という独自プレフィックス付きのため、既存サイトのCSSと衝突しにくくなっています。
色は background、丸みは border-radius、大きさは padding を変えるだけで印象が大きく変わります。各カードの「シャッフル」ボタンを押すと色・角丸・余白の組み合わせをランダムに試せて、下のコードも自動で書き換わるので、そのままコピーすれば再現できます。
ボタンの文字色と背景色はコントラスト比4.5:1以上を目安に。またリンクとして使う場合は <a> タグに、フォーム送信やJSの操作には <button> タグにと、役割に合った要素を選ぶことがSEO・支援技術の両面で大切です。
bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。<a> タグに同じクラスを付け、text-decoration: none; と display: inline-block; を追加すればボタンと同じ見た目になります。background や border-radius、padding の値を書き換えるだけです。各カードの「シャッフル」ボタンを押すと色・角丸・余白のバリエーションをその場で試せて、コードも自動で書き換わります。ボタンと組み合わせて使いやすいパーツはこちら。