CSS ボタン生成ツール

CSS ボタン生成ツールについて

この CSS ボタン生成ツールを使うと、ボタンを視覚的にデザインし、正確な CSS をコピーできます。テキスト・色・パディング・角丸・枠線・フォントサイズ・シャドウをライブコントロールで調整すると、プレビューと生成コードが即座に更新されます。すべてブラウザ内で完結し、アップロードは一切ありません。

コントロール可能なプロパティ

• 色 —— 背景色と文字色のカラーピッカーで瞬時にテーマ変更。
• サイズ —— フォントサイズと水平/垂直パディングのスライダー。
• 形状 —— 角丸スライダー、直角（0px）から完全な角丸まで。
• 枠線 —— 太さと色を調整可能。アウトラインボタンの作成に便利。
• シャドウ —— box-shadow 値を自由入力し、奥行きと浮き上がりを表現。

使い方

1. ボタンテキスト欄にボタンのラベルを入力します。
2. 背景色と文字色を選びます。
3. スライダーをドラッグしてフォントサイズ・パディング・角丸・枠線を設定。
4. box-shadow 値を入力（または既定の柔らかなシャドウをそのまま使用）。
5. CSS をコピーをクリックし、スタイルシートにルールを貼り付けます。

よくある質問

生成された CSS にホバー（:hover）状態は含まれますか？ 基本ルールのみ生成されます。ホバー効果が必要な場合は、:hover ルールを手動で追加し、少し濃い背景色や大きめのシャドウを設定してください。

任意の box-shadow 値を使えますか？ はい。この入力欄はカンマ区切りの複数シャドウを含む、あらゆる有効な CSS box-shadow 文字列を受け付けます。

ボタンはレスポンシブですか？ ボタンは相対フォントサイズと固定ピクセルのパディングを使用するため、ページのフォントサイズに応じて自然にスケールします。rem や % を使いたい場合は、コピー後に単位を調整してください。