A sleek, modern button with a soft neumorphic feel and a glowing cyan gradient border that makes it stand out without being aggressive. Perfect for hero sections, contact CTAs, or anywhere you want a polished, high-tech aesthetic that feels premium yet minimal.
This component comes in two functional behaviors, split across three variants:
The Auto-Switching Button (Base & Temporary Highlight) — Both of these variants automatically animate the button between its resting and highlighted states — this includes both the text color cycling between the base and temporary highlight color, and the gradient border animating alongside it. The only difference between them is the starting state — Base begins in the gray resting color, while Temporary Highlight begins already in the highlighted state. Pick whichever starting state fits your layout best.
Fixed Version — A calmer alternative that disables all automatic animation entirely. The text stays permanently in the base color, the gradient border stays static, and the only interaction that occurs is on hover. Use this when you want a refined, understated button that doesn't draw unsolicited attention.
Property Description Text The button label. Defaults to "Contact Us" — change it to anything. Text Base Color The resting text color (default #80878A, soft slate gray). Also the permanent color in the Fixed Version. Text Hover Color The color the text shifts to when hovered (default #82BDCF, bright cyan). Temporary Highlight Text Color The color the text cycles to during the automatic animation in the Base and Temporary Highlight variants (default #82BDCF). Can be set independently from the hover color. Link Optional URL the button navigates to on click. New Tab Toggle whether the link opens in a new browser tab. Smooth Scroll Enable smooth scrolling when linking to an anchor on the same page.
Want the button to actively grab attention on its own? Use Base or Temporary Highlight — they behave identically, animating both the text color and the gradient border automatically. Just choose which state it should start from.
Want a fully static button with only a hover effect? Use Fixed Version — everything stays locked in place, and only hovering triggers an interaction.
The glowing border is a gradient, and unfortunately Framer doesn't currently support gradient values as component variables — so it can't be exposed as a configurable setting in the properties panel. If you'd like to tweak the border gradient to match your brand, simply detach the component and use it as a starting point to edit the styles directly. Everything inside is clean and easy to adjust from there.
Refund Policy
Not happy with your purchase? Request a refund within 3 days of purchase — no questions asked — by contacting me directly. Refunds are available to customers with fewer than 3 refund requests across all my components in the past 6 months.
Jirei
