/Click feedback
Click feedback • CSS
Neon Invert Button
A bold orange CTA that inverts into a dark, softly glowing surface on hover.
Installation
Terminal
npx shadcn@latest add https://microkit.co/r/neon-invert-button.jsonCode
TypeScript component
1export function NeonInvertButton() {2return (3<button type="button" className="neon-invert-button">4Get Started5</button>6);7}
CSS
1.neon-invert-button {2box-sizing: border-box;3appearance: none;4display: inline-flex;5align-items: center;6justify-content: center;7width: 124px;8max-width: 100%;9min-height: 45px;10border: 1px solid transparent;11border-radius: 13px;12background: #f97316;13padding: 10px 14px;14color: #1d1d23;15font-family: Arial, Helvetica, sans-serif;16font-size: 15px;17font-weight: 500;18line-height: 1;19cursor: pointer;20transition:21background-color .45s cubic-bezier(.16, 1, .3, 1),22border-color .45s ease,23color .45s ease,24box-shadow .45s ease;25}26.neon-invert-button:hover,27.neon-invert-button:focus-visible {28border-color: #f9731680;29background: #1d1d23;30color: #f97316;31box-shadow: inset 0 0 10px 2px #f9731680;32}33.neon-invert-button:focus-visible {34outline: 2px solid #f97316;35outline-offset: 5px;36}