Button Generator
ボタンの余白・角丸・色・影・ホバー状態を視覚的に設定し、CSS をその場でコピーできます。
スタイル
ホバー時の状態
プレビュー
プレビューは生成した CSS を適用した実際のボタン要素です。ホバー状態を確認してからコピーしてください。
使い方
- ボタンの文字を入力し、左右の余白・上下の余白・角の丸み・文字サイズをピクセルで設定します。
- カラーピッカーで背景色と文字色を選び、枠線の太さと枠線の色を指定します。
- 影の段階（小・中・大・なし）とトランジションの長さ（ミリ秒）を選びます。
- ホバー時の背景色と文字色を選び、プレビューにカーソルを合わせて操作感を確かめます。
- CSS を生成を押し、レポートからスタイルシートと HTML スニペットをコピーします。
こんなときに
- デザインレビュー —— ビルドを触らずにランディングページの行動ボタンを試せます。
- 実装への引き継ぎ —— そのまま使える CSS をチケットに貼れば、意図が正確に伝わります。
- ダークモードの確認 —— 背景と文字色を並べて替え、コントラストが納得できるまで調整できます。
- CSS の学習 —— 余白・角丸・影が同時に効く実際の要素で学べます。
プライバシーについて
生成ツールは純粋なブラウザー内の JavaScript です。入力はライブのボタンと CSS 文字列を更新するだけなので、スタイルがどこかに送信されることはなく、オフラインでも使えます。
FAQ
Q: 生成される CSS はどのブラウザーで動きますか？ A: padding、border-radius、box-shadow、transition、:hover といった標準的なプロパティーのみを使っています。現在のデスクトップ・モバイルブラウザーで動作します。
Q: 丸いカプセル状のボタンはどう作りますか？ A: 角の丸みをボタンの高さの半分より大きくします。例えば 999 px にすると両端が完全に丸くなります。
Q: トランジションは何を調整しますか？ A: ホバー時の変化が完了するまでの時間（ミリ秒）です。150〜250 ms は素直に感じられ、400 ms を超えると押したときのもたつきが目立ちます。
Q: プレビューは画像ですか？ A: いいえ。生成した CSS を適用した実際のボタン要素なので、ホバーや文字の折り返しも本番と同じふるまいをします。
データはこのデバイス内にとどまります
Button Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。