コードなしで本格的なCSSボタンをビジュアル操作でデザイン。すべてのスタイルプロパティをリアルタイムで調整し、内蔵プリセットから選ぶか、完成したCSSとHTMLをワンクリックでコピーできます。

<div>
  <div class="bgen-section-title">プリセット</div>
  <div class="bgen-presets">
    <button class="bgen-preset-btn" data-preset="primary">プライマリ</button>
    <button class="bgen-preset-btn" data-preset="secondary">セカンダリ</button>
    <button class="bgen-preset-btn" data-preset="outline">アウトライン</button>
    <button class="bgen-preset-btn" data-preset="ghost">ゴースト</button>
    <button class="bgen-preset-btn" data-preset="gradient">グラデーション</button>
    <button class="bgen-preset-btn" data-preset="threed">3D</button>
    <button class="bgen-preset-btn" data-preset="pill">ピル</button>
    <button class="bgen-preset-btn" data-preset="icon">アイコン</button>
  </div>
</div>

<hr class="bgen-divider">

<div class="bgen-field">
  <label>ボタンテキスト</label>
  <input type="text" id="bgen-text" class="bgen-select" value="クリック" style="padding:5px 8px;">
</div>

<div class="bgen-section-title">カラー</div>

<div class="bgen-field">
  <label>背景色</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-bg" value="#4f46e5">
    <input type="text" id="bgen-bg-hex" value="#4f46e5">
  </div>
</div>

<div class="bgen-field">
  <label>文字色</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-color" value="#ffffff">
    <input type="text" id="bgen-color-hex" value="#ffffff">
  </div>
</div>

<div class="bgen-field">
  <label>ボーダー色</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-border-color" value="#4f46e5">
    <input type="text" id="bgen-border-color-hex" value="#4f46e5">
  </div>
</div>

<hr class="bgen-divider">

<div class="bgen-section-title">サイズ・フォント</div>

<div class="bgen-field">
  <label>フォントサイズ <span class="bgen-val" id="bgen-fontsize-val">16px</span></label>
  <input type="range" id="bgen-fontsize" min="10" max="36" value="16">
</div>

<div class="bgen-field">
  <label>パディング 横 <span class="bgen-val" id="bgen-padh-val">20px</span></label>
  <input type="range" id="bgen-padh" min="4" max="80" value="20">
</div>

<div class="bgen-field">
  <label>パディング 縦 <span class="bgen-val" id="bgen-padv-val">12px</span></label>
  <input type="range" id="bgen-padv" min="2" max="40" value="12">
</div>

<div class="bgen-field">
  <label>角丸 (border-radius) <span class="bgen-val" id="bgen-radius-val">8px</span></label>
  <input type="range" id="bgen-radius" min="0" max="60" value="8">
</div>

<hr class="bgen-divider">

<div class="bgen-section-title">ボーダー</div>

<div class="bgen-field">
  <label>ボーダー太さ <span class="bgen-val" id="bgen-bwidth-val">0px</span></label>
  <input type="range" id="bgen-bwidth" min="0" max="8" value="0">
</div>

<div class="bgen-field">
  <label>ボーダースタイル</label>
  <select id="bgen-bstyle" class="bgen-select">
    <option value="solid">実線 (solid)</option>
    <option value="dashed">破線 (dashed)</option>
    <option value="dotted">点線 (dotted)</option>
    <option value="double">二重線 (double)</option>
  </select>
</div>

<hr class="bgen-divider">

<div class="bgen-section-title">ボックスシャドウ</div>

<div class="bgen-field">
  <label>影 X <span class="bgen-val" id="bgen-sx-val">0px</span></label>
  <input type="range" id="bgen-sx" min="-20" max="20" value="0">
</div>
<div class="bgen-field">
  <label>影 Y <span class="bgen-val" id="bgen-sy-val">4px</span></label>
  <input type="range" id="bgen-sy" min="-20" max="20" value="4">
</div>
<div class="bgen-field">
  <label>影 ぼかし <span class="bgen-val" id="bgen-sblur-val">14px</span></label>
  <input type="range" id="bgen-sblur" min="0" max="60" value="14">
</div>
<div class="bgen-field">
  <label>影 拡散 <span class="bgen-val" id="bgen-sspread-val">0px</span></label>
  <input type="range" id="bgen-sspread" min="-10" max="20" value="0">
</div>
<div class="bgen-field">
  <label>影の色</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-scolor" value="#4f46e5">
    <input type="text" id="bgen-scolor-hex" value="#4f46e5">
  </div>
</div>
<div class="bgen-field">
  <label>影の透明度 <span class="bgen-val" id="bgen-sopacity-val">30%</span></label>
  <input type="range" id="bgen-sopacity" min="0" max="100" value="30">
</div>

<hr class="bgen-divider">

<div class="bgen-section-title">ホバーエフェクト</div>

<div class="bgen-field">
  <label>ホバー時の背景色</label>
  <div class="bgen-color-row">
    <input type="color" id="bgen-hbg" value="#4338ca">
    <input type="text" id="bgen-hbg-hex" value="#4338ca">
  </div>
</div>

<div class="bgen-toggle-row">
  <label style="font-size:13px;font-weight:500;color:#333;">ホバーでスケール</label>
  <label class="bgen-toggle">
    <input type="checkbox" id="bgen-hover-scale">
    <span class="bgen-toggle-slider"></span>
  </label>
</div>

<div class="bgen-field">
  <label>スケール倍率 <span class="bgen-val" id="bgen-hscale-val">1.05</span></label>
  <input type="range" id="bgen-hscale" min="100" max="120" value="105">
</div>

<div class="bgen-toggle-row">
  <label style="font-size:13px;font-weight:500;color:#333;">ホバーで影を強調</label>
  <label class="bgen-toggle">
    <input type="checkbox" id="bgen-hover-shadow" checked>
    <span class="bgen-toggle-slider"></span>
  </label>
</div>

<div class="bgen-field">
  <label>トランジション時間 <span class="bgen-val" id="bgen-trans-val">300ms</span></label>
  <input type="range" id="bgen-trans" min="50" max="1000" step="50" value="300">
</div>

<div class="bgen-preview-box light" id="bgen-preview-box">
  <span class="bgen-preview-label">ライブプレビュー</span>
  <div class="bgen-theme-toggle">
    <button class="bgen-theme-btn active" data-theme="light">ライト</button>
    <button class="bgen-theme-btn" data-theme="dark">ダーク</button>
  </div>
  <button id="bgen-live-btn">クリック</button>
</div>

<div class="bgen-code-block">
  <div class="bgen-code-tabs">
    <button class="bgen-code-tab active" data-tab="css">CSS</button>
    <button class="bgen-code-tab" data-tab="html">HTML</button>
  </div>
  <button class="bgen-copy-btn" id="bgen-copy-btn">コピー</button>
  <div class="bgen-code-output" id="bgen-code-output"></div>
</div>

使い方

  1. プリセットを選ぶ — プライマリ、アウトライン、グラデーションなど8種類のプリセットからスタート。
  2. コントロールで調整 — 色・サイズ・ボーダー・シャドウ・ホバーエフェクトをリアルタイムで変更。
  3. プレビューテーマを切り替え — ライト・ダーク背景でボタンの見え方を確認。
  4. CSSまたはHTMLをコピー — タブを切り替えて「コピー」をクリック。
  5. プロジェクトに貼り付け — .my-button を自分のクラス名に変更して使用。

CSSプロパティ解説

プロパティ役割
background-colorボタンの背景色
colorテキストの色
font-sizeテキストサイズ（px）
padding内側の余白（縦 / 横）
border-radius角丸の半径。9999px でピル形状
borderボーダーの太さ・スタイル・色
box-shadowドロップシャドウ・グロウシャドウ
transitionホバーアニメーションの速度
transform: scale()ホバー時の拡大エフェクト

プリセット一覧

  • プライマリ — インディゴの塗りつぶし、控えめなシャドウ
  • セカンダリ — グレー系、シンプルなデザイン
  • アウトライン — 透明背景、カラーのボーダーとテキスト
  • ゴースト — ボーダーも背景もなし、ホバー時に背景色が出現
  • グラデーション — linear-gradient 背景、グロウシャドウ、スケールホバー
  • 3D — 下方向の実線シャドウで立体感を演出
  • ピル — border-radius: 9999px の完全丸角
  • アイコンボタン — 等幅パディングのコンパクトな正方形ボタン

アクセシビリティのポイント

  • テキストと背景の コントラスト比は4.5:1以上 を維持する。
  • :focus-visible でフォーカスリングを明示し、キーボード操作に対応する。
  • モバイル向けにタップ領域は 44×44px以上 を確保する。
  • アクション用は <button>、ページ遷移用は <a> タグを使い分ける。

関連する無料ツール

freee会計で経理をもっとスマートに

請求書・経費・確定申告をAIが自動化。個人事業主から中小企業まで、freeeならバックオフィス業務を大幅に削減できます。まずは無料でお試しください。

freeeを無料で試す