ボタン生成器

このツールは、テキスト、色、サイズ、境界線、ホバーエフェクト、およびオプションの box-shadow から CSS ボタンを作成し、ホバー可能なライブインタラクティブプレビューを提供します。`transition: all 0.2s ease` を含む `.button { ... }` クラスを出力し、選択したホバーエフェクト（暗くする、明るくする、持ち上げる、なし）に基づいて別個の `.button:hover` ルールを生成します。

1. ボタンテキストを入力します（デフォルトは Click Me）。 2. カラーピッカーまたは 16 進入力で背景色とテキスト色を選択します。 3. スライダーで文字サイズ（10-32px）、パディング X（8-48px）、パディング Y（4-24px）、角丸半径（0-50px）を調整します。 4. 境界線の色と境界線の幅（0-5px）を設定します。 5. ホバーエフェクトを選択します：暗くする、明るくする、持ち上げる、なし。 6. 必要に応じてシャドウを有効化し、ぼかし、オフセット X、オフセット Y を調整します。 7. プレビューをホバーして効果を確認し、CSS 出力カードのコピーボタンをクリックします。

暗くする/明るくするは `adjustBrightness` によって背景色の RGB 値を +/-30 します。持ち上げるはホバー時に `transform: translateY(-2px)` と `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` を適用します。なしを選択するとホバールールは完全に省略されます。出力は background-color、color、font-size、padding、border-radius、border、cursor、transition、およびオプションの box-shadow を含む単一の `.button` ルールで、適用可能な場合は後に `.button:hover` ブロックが続きます。HTML は生成されません。