色・角丸・影・余白を調整して、ボタンのCSSを生成します。ホバー時の変化も含めてコピーできます。
ボタンに必要な状態
見落とされやすいのがフォーカスの表示です。既定のアウトラインを消すだけにすると、キーボードで操作する人がどこを選んでいるか分からなくなります。消す場合は、必ず代わりの見た目を用意してください。
- 通常（default）
- ホバー（hover）：カーソルが乗ったとき
- フォーカス（focus-visible）：キーボード操作で選択されたとき
- 押下（active）：クリック中
- 無効（disabled）：操作できないとき
実装のポイント
.btn {
padding: 12px 24px;
border-radius: 8px;
transition: background-color .2s, transform .1s;
cursor: pointer;
}
.btn:hover { background-color: #1d7a41; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #2fa35a; outline-offset: 2px; }使いやすいボタンの条件
- タップ領域は44×44px以上を確保する（モバイルでの押しやすさの目安）
- 文字色と背景色のコントラスト比は4.5:1以上
- ボタンとリンクを見た目で区別する
- 文言は「送信」より「無料で申し込む」のように、何が起きるかが分かる言葉にする
よくある質問
Q outline: none は使ってもいいですか？
そのままだとキーボード操作時に選択位置が分からなくなります。:focus-visible で代わりの表示を必ず用意してください。
Q buttonとaのどちらを使うべき？
操作を実行するならbutton、別ページへ移動するならaを使います。見た目ではなく役割で選んでください。
Q タップ領域の目安は？
44×44px以上が一般的な目安です。小さいボタンはpaddingで領域を確保してください。
Q ホバー効果はスマホでも効きますか？
タッチ端末ではホバーが機能しません。押下時（:active）の変化も併せて設定すると反応が分かりやすくなります。