LocalToolsオフラインブラウザツール集

カテゴリー: 開発ツール

CSS ボタンジェネレーター

サイト側で企画したツールツールが見つからない？

ライブプレビューとコピーできるコードでカスタマイズ可能な CSS ボタンを作成

ボタンを見た目で設計し、きれいな HTML と CSS をコピーします。色、枠線、角丸、余白、影、ホバーとフォーカスのスタイルをブラウザー内で調整できます。

ホバーとフォーカス

プレビュー

プレビューにカーソルを合わせるか、Tab キーで移動すると、ホバーとフォーカスのスタイルを確認できます。

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

スニペットは本物の <button> を使い、:focus-visible のアウトラインを表示したままにしています。このアウトラインを消すと、キーボード操作の人は現在位置が分からなくなります。

プレビューも生成コードも、どちらもブラウザー内で組み立てられます。

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

これは 1 つのボタンのための視覚的なエディターです。色、枠線、角丸、余白、文字サイズと太さ、影、そしてホバー時に何が変わるか。プレビューはコピーするのと同じ CSS で装飾されるので、カーソルを合わせたり Tab で移動したりすると、近似ではなく実際の状態が見えます。2 つの点は成り行き任せにしていません。マークアップは装飾した div ではなく本物の `<button type="button">` なので、フォーカスもキーボード操作も最初から備わります。そして出力は常に `:focus-visible` のアウトラインを表示したまま残します。生成されたボタン CSS で最もよくあるアクセシビリティ上の不具合は、キーボード利用者にページ上の現在位置を分からなくする `outline: none` だからです。

使い方

  1. ラベルとクラス名を決め、背景・文字・枠線の色を選びます。
  2. 角丸、枠線の太さ、余白、文字サイズと太さを、プレビューが良くなるまで調整します。
  3. ホバー時の背景とフォーカスリングを設定し、HTML と CSS をコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

ホバーのスタイルも作れますか？
はい。ホバー時の背景、任意の浮き上がり、影の変化はいずれも生成される CSS に含まれ、後から編集できる独立した :hover ルールになっています。
ボタンに JavaScript は必要ですか？
いいえ。出力は素の HTML と CSS です。スクリプトが必要なのは、押されたときにボタンが何をするかの部分だけです。
HTML と CSS を別々にコピーできますか？
はい。それぞれにコピーボタンがあるので、CSS はスタイルシートへ、マークアップは必要な場所へ持っていけます。
なぜ CSS にフォーカスのアウトラインが含まれるのですか？
それがないと、キーボードで操作する人が今どの部品にいるのか分からなくなるからです。生成されるルールは :focus-visible を使うので、リングはキーボードのフォーカス時に表示され、マウスのクリックごとに出ることはありません。
生成されたコードはローカルのものですか？
はい。すべての設定、プレビュー、生成されたスニペットはブラウザー内にとどまります。

すべてのツールに戻る