コード、データと QRツール

CSS ボタンビルダー

表示を調整してプレビューし、エスケープ済み HTML と再利用できる CSS をコピーします。

ブラウザ内で処理登録不要プライバシーの説明 ↗

プレビュー

設定を調整するとプレビューとコードが更新されます。

使い方

使い方

  1. ボタンのラベルと色を設定します。
  2. 余白、枠線、角丸、文字サイズ、影を調整します。
  3. HTML と CSS をコピーし、実際の画面で確認します。

安全で明確な出力

ラベルは HTML に入れる前にエスケープされます。実際の button 要素と見えるフォーカス表示を生成しますが、動作はアプリ側で追加してください。

ブラウザー内で作成

プレビューとコード生成はこのブラウザー内だけで行い、内容や設定をアップロードしません。

よくある質問

あわせて知りたいこと

生成したボタンは動作しますか?

いいえ。HTML と CSS のみです。アプリ側で動作と適切なアクセシビリティ情報を追加してください。

リンクにも使えますか?

同じ CSS は使えますが、移動にはリンク、操作にはボタンを使ってください。