/Click feedback
Click feedback • CSS
Glow Arrow Button
A bright CTA with a soft glow and a moving arrow on hover.
Installation
Requires lucide-react for its icons. The shadcn CLI installs it for you; copying the code by hand means installing it yourself.
Terminal
npx shadcn@latest add https://microkit.co/r/glow-arrow-button.jsonCode
TypeScript component
1import { ArrowRight } from "lucide-react";23export function GlowArrowButton() {4return <button type="button" className="glow-arrow-button"><span>Get Started</span><ArrowRight aria-hidden="true" size={16} strokeWidth={2.3} /></button>;5}
CSS
1.glow-arrow-button {2display: inline-flex;3align-items: center;4gap: 8px;5border: 0;6border-radius: 999px;7background: #f0f0f0;8padding: 16px 32px;9color: #111;10font-size: 16px;11font-weight: 500;12cursor: pointer;13transition: box-shadow .3s ease;14}15.glow-arrow-button svg {16transition: transform .3s ease;17}18.glow-arrow-button:hover, .glow-arrow-button:focus-visible {19box-shadow: 0 3px 20px #f0f0f080;20}21.glow-arrow-button:hover svg, .glow-arrow-button:focus-visible svg {22transform: translateX(4px);23}24.glow-arrow-button:focus-visible {25outline: 2px solid #f97316;26outline-offset: 4px;27}