CSSボタンの作成 — 見ながら調整してコードをコピー
余白、角の丸み、色、影、ホバー時の変化を画面で調整すると、そのままのCSSが出ます。数値を書き換えて読み込み直す手間がありません。
ボタンの見た目は、10個ほどの数値で決まります。上下左右の余白、文字の大きさ、角の丸み、枠線、背景色、文字色、影。どれも少し変えるだけで印象が変わるので、試しながら決めるのが早道です。
調整した結果はCSSとしてコピーできます。プロジェクトに貼って、クラス名だけ合わせれば使えます。
押せることが分かる形に
ボタンらしく見せる要素は、背景色、十分な余白、角の丸み、そしてカーソルが乗ったときの変化です。文字に下線を引いただけのものはリンクに見え、枠だけのものは入力欄に見えます。
押せる領域は、指で押せる大きさが必要です。縦44px前後が目安とされます。文字サイズだけを大きくするのではなく、上下の余白で確保してください。
ホバー時の変化は控えめに。背景色を少し暗くする、影を少し強くする程度で十分伝わります。大きく動かすと落ち着きません。
調整する項目
| 項目 | 目安 |
|---|---|
| 上下の余白 | 12〜16px |
| 左右の余白 | 20〜32px |
| 角の丸み | 4〜8px、または完全な丸 |
| 文字サイズ | 14〜16px |
| 影 | 薄く、下方向に少しだけ |
忘れられがちな状態
通常の見た目だけ作って終わりにしがちですが、ボタンには他にも状態があります。カーソルが乗ったとき、押している瞬間、キーボードで選ばれているとき、押せないとき。
特にキーボードで選ばれている状態の表示を消してしまうと、マウスを使わない人がどこにいるか分からなくなります。既定の表示を消すなら、代わりの見た目を必ず用意してください。
文字色と背景色のコントラスト比も確認してください。押せないときの薄いグレーは、読めない水準まで落ちがちです。
よくある質問
生成されたCSSはそのまま使えますか？
使えます。クラス名をプロジェクトに合わせて変更してください。
Tailwindで使えますか？
出力はCSSです。Tailwindを使っている場合は、対応するクラスに読み替えてください。
ボタンの大きさはどのくらいが適切ですか？
指で押す前提なら縦44px前後が目安です。余白で確保してください。
設定は保存されますか？
保存されません。CSSをコピーして使ってください。