ボタン Button

ユーザーがアクションを実行するための最も基本的なUI要素。

使用場面: フォーム送信、ナビゲーション、操作の実行 採用例: Material Design, Apple Human Interface

ライブデモ

ソースコード

<div class="demo-buttons">
  <div class="demo-btn-row">
    <button class="demo-btn demo-btn-primary">Primary</button>
    <button class="demo-btn demo-btn-secondary">Secondary</button>
    <button class="demo-btn demo-btn-outline">Outline</button>
    <button class="demo-btn demo-btn-ghost">Ghost</button>
  </div>
  <div class="demo-btn-row">
    <button class="demo-btn demo-btn-primary demo-btn-sm">Small</button>
    <button class="demo-btn demo-btn-primary">Medium</button>
    <button class="demo-btn demo-btn-primary demo-btn-lg">Large</button>
  </div>
  <div class="demo-btn-row">
    <button class="demo-btn demo-btn-primary" disabled>Disabled</button>
    <button class="demo-btn demo-btn-primary demo-btn-loading">
      <span class="demo-btn-spinner"></span> Loading
    </button>
  </div>
</div>
.demo-buttons { display: flex; flex-direction: column; gap: 14px; }
.demo-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.demo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.demo-btn:active { transform: scale(0.97); }
.demo-btn-primary { background: var(--ui-primary); color: #fff; }
.demo-btn-primary:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-primary) 40%, transparent); }
.demo-btn-secondary { background: #f3f4f6; color: #333; }
.demo-btn-secondary:hover { background: #e5e7eb; }
.demo-btn-outline {
  background: transparent; color: var(--ui-primary);
  border: 2px solid var(--ui-primary);
}
.demo-btn-outline:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.demo-btn-ghost { background: transparent; color: var(--ui-primary); }
.demo-btn-ghost:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.demo-btn-sm { padding: 5px 12px; font-size: 12px; }
.demo-btn-lg { padding: 12px 28px; font-size: 16px; }
.demo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.demo-btn-loading { pointer-events: none; opacity: 0.8; }
.demo-btn-spinner {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: demo-btn-spin 0.6s linear infinite;
}
@keyframes demo-btn-spin { to { transform: rotate(360deg); } }

AIプロンプト

Basic 
ボタンコンポーネントをHTML/CSSで作ってください。Primary、Secondary、Outlineの3種類のスタイルがあります。
Custom 
以下の仕様でボタンを実装してください。
- バリエーション：Primary, Secondary, Outline, Ghost
- プライマリカラー: #2563eb
- サイズ：Small, Medium, Large
- ホバー/アクティブ/無効の状態
- ローディング状態（スピナー付き）
- アイコン + テキスト
- リップルエフェクト
Advanced 
アクセシビリティ完全対応のボタンを実装してください。
- <button>, <a>, role="button" の使い分けガイドライン
- フォーカスリング（:focus-visible）
- aria-disabled vs disabled属性の使い分け
- aria-busy="true"（ローディング時）
- aria-pressed（トグルボタン）
- キーボードでEnter/Spaceで発火
- リップルエフェクト（Material Design風）
- CSS Custom Properties でテーマカスタマイズ
- prefers-contrast: high 対応
- ボタングループ内のフォーカス管理
← カタログに戻る