First CH Designs
Back to gallery
BTN-01Elements

Standard Buttons

The three baseline buttons for white-background sites: primary (amber), secondary (outlined), and text — three levels of emphasis.

Added:
2026-07-23
Dependencies:
None
tags
#button #brand

Preview

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>
  );
}

Add to your project via shadcn CLI

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