BTN-01Elements

スタンダードボタン

白基調サイトの基本となる3種のボタン。プライマリ(アンバー)・セカンダリ(枠線)・テキストの優先度3段階で構成。

追加日:: 2026-07-23
依存:: なし
tags: #button #brand

プレビュー

return function SolidButton() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <button
        type="button"
        className="rounded-lg bg-amber-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-amber-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 active:bg-amber-800"
      >
        お問い合わせ
      </button>
      <button
        type="button"
        className="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-800 shadow-sm transition-colors hover:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
      >
        資料をダウンロード
      </button>
      <button
        type="button"
        className="rounded-lg px-5 py-2.5 text-sm font-semibold text-amber-700 transition-colors hover:bg-amber-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
      >
        詳しく見る →
      </button>
    </div>
  );
}

shadcn CLI でプロジェクトに追加

npx shadcn@latest add https://designs.first-ch.com/r/solid-button.json