無料ツール
日本語
CSSボタンの作成
CSSボタンの作成 — サイズや色を指定し、コードや結果を確認. 入力ガイド: 背景色, 色, ボタン内の余白 (px), 角の半径 (px). 登録不要.
登録不要
ツールを読み込み中…
使い方
- 1入力ガイド: 背景色, 色, ボタン内の余白 (px), 角の半径 (px).
- 2ツールを実行して結果を確認してください。
- 3結果をコピー / 結果をファイルに保存.
使う前に
入力範囲と単位を確認してください。結果は入力条件とブラウザに基づきます。
広告配信で通信情報を処理する場合があります。パーソナライズはプライバシー選択に従います。 プライバシー（英語）
実際の入力と出力の例
実際のエンジンに以下の例を入力した結果です。個人の入力や保存作業は使いません。ツールの例読込で同じ入力を確認できます。
入力例
| 項目 | 値 |
|---|---|
| 背景色 | #0F766E |
| 色 | #FFFFFF |
| ボタン内の余白 (px) | 12 |
| 角の半径 (px) | 12 |
結果例
.button {
background: #0F766E;
color: #FFFFFF;
padding: 12px 24px;
border: 0;
border-radius: 12px;
min-height: 44px;
cursor: pointer;
}
.button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }入力条件
以下は入力検証の許容範囲であり、すべての値が現実的・適切だと保証するものではありません。
- ボタン内の余白 (px): 許容範囲: 4 ≤ x ≤ 40
- 角の半径 (px): 許容範囲: 0 ≤ x ≤ 100