CSSボタンジェネレーター — 無料ビジュアルビルダー

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

使い方

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

CSSプロパティ解説

プリセット一覧

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

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

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

関連する無料ツール

• CSSボックスシャドウジェネレーター — 多層シャドウのビルドとプレビュー
• CSSグラデーションジェネレーター — リニア・ラジアル・コニックグラデーション
• CSSアニメーションジェネレーター — キーフレームアニメーションとイージング設定