{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"html-css-gradient-border-button-on-dark","type":"registry:component","title":"HTML CSS Gradient Border Button On Dark","description":"","dependencies":[],"files":[{"path":"components/we-inc/html-css-gradient-border-button-on-dark.tsx","type":"registry:component","content":"// Buttons with a gradient rim: a solid inner fill over a gradient that only shows through the transparent border.\nexport default function HtmlCssGradientBorderButtonOnDark() {\n  const rim = {\n    background:\n      \"linear-gradient(#18181b, #18181b) padding-box, linear-gradient(120deg, #34d399, #22d3ee 45%, #fbbf24) border-box\",\n  };\n  return (\n    <section className=\"bg-zinc-950 px-5 py-16\">\n      <style>{`\n        .hb5-btn:hover { background: linear-gradient(#27272a, #27272a) padding-box, linear-gradient(120deg, #6ee7b7, #67e8f9 45%, #fcd34d) border-box !important; }\n        .hb5-btn:active { transform: scale(.98); }\n        @media (prefers-reduced-motion: reduce) { .hb5-btn:active { transform: none; } }\n      `}</style>\n      <div className=\"mx-auto flex max-w-xl flex-col items-center text-center\">\n        <h2 className=\"text-2xl font-semibold tracking-tight text-white\">Field notes, synced everywhere</h2>\n        <p className=\"mt-2 max-w-sm text-sm text-zinc-400\">Plans for researchers who work offline in the field and sync when back in signal.</p>\n        <div className=\"mt-8 flex flex-wrap justify-center gap-3\">\n          <button type=\"button\" style={rim} className=\"hb5-btn min-h-[48px] rounded-xl border-2 border-transparent px-6 text-sm font-semibold text-white transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950\">\n            Start a free month\n          </button>\n          <button type=\"button\" style={rim} className=\"hb5-btn min-h-[48px] rounded-full border-2 border-transparent px-6 text-sm font-semibold text-zinc-100 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950\">\n            Compare plans\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n"}]}