CSSボタンジェネレーター

CSSボタンジェネレーター: 用途

用意されたスタイル（塗りつぶし、ピル型、アウトライン、グラデーション、四角）を選び、テキスト、色、文字サイズ、余白、角、影、フォントの太さ、マウスを重ねたときの効果（浮き上がる、暗くなる、拡大する）を調整します。プレビューは実際に動作します。マウスを重ねて、クリックしてみてください。

CSSには、キーボード用のフォーカス表示、マウスのある端末だけのホバー効果、クリック時の軽い縮小が含まれます。ツールは、テキストと背景のコントラストを表示し、4.5:1を下回ると警告します。

使い方

1. 用意されたスタイルを選びます。
2. 色、サイズ、角、影、効果を調整します。
3. コントラストを確認して、CSSとHTMLをコピーします。

使うタイミング

• ランディングページの行動を促すボタン。
• サイトのボタンを統一する。
• 結果を見ながらCSSを学ぶ。

よくある質問

このボタンはアクセシブルですか？

コードはbuttonタグ（またはa）を使い、:focus-visibleでフォーカスの輪郭を見えるようにしています。テキストと背景のコントラストが、通常テキストのWCAG最小値である4.5:1を下回ると、ツールが警告します。

なぜホバー効果がパソコンでしか出ないのですか？

ホバーは@media (hover: hover)の中にあります。スマートフォンではタップで偽のホバーが発生し、ボタンに残ってしまうためです。クリック効果（:active）はすべての端末で動作します。

コードをリンクに使えますか？

はい。<button>を<a href=...>に置き換え、クラスはそのままにしてください。CSSには、どちらの場合にも対応するdisplay:inline-flexとtext-decoration:noneがすでに含まれています。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール