Hover Border Gradient
Button/container with an animated gradient border that activates on hover.
Preview
Hover Border Gradient
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Secondary CTAs and navigation cards.
Why this component matters
The gradient border adds visual interest to outline-style buttons, creating a middle ground between primary and ghost buttons.
Usage guidance
Use as a secondary CTA next to a solid primary button. Set the gradient to IO purple range. Duration 300-400ms.
Installation
bash
npx shadcn@latest add @aceternity/hover-border-gradientUsage
example.tsxtsx
import { HoverBorderGradient } from "@/components/ui/hover-border-gradient";
export default function Example() {
return (
<HoverBorderGradient>
{/* Your content here */}
</HoverBorderGradient>
);
}Source
hover-border-gradient.tsx
components/ui/hover-border-gradient.tsx