microkit
componentcircle-surface-buttonsource: ok · hit
Circle Surface Button
A circular CTA whose dark surface expands into an orange fill.
npx shadcn add "https://microkit.co/r/circle-surface-button.json"free
Where it goes
cta
Visual style
dark-futuristic
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 2:11:37 PM
registry/microkit/circle-surface-button.tsx
export function CircleSurfaceButton() {
return <button type="button" className="group relative grid size-32 cursor-pointer place-items-center overflow-hidden rounded-full border border-[light-dark(#14181e,#f0f0f0)] bg-transparent p-3 text-[13px] font-medium text-[light-dark(#14181e,#f0f0f0)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]"><span className="relative z-10 transition-colors duration-300 group-hover:text-[light-dark(#ffffff,#111)] group-focus-visible:text-[light-dark(#ffffff,#111)]">CLICK HERE</span><span className="absolute inset-0 rounded-full bg-[light-dark(#dfe3ea,#323232)] transition-[transform,background-color] duration-500 group-hover:scale-110 group-hover:bg-[#f97316] group-focus-visible:scale-110 group-focus-visible:bg-[#f97316]" aria-hidden="true" /></button>;
}