CTA Button
Large call-to-action button with purple gradient glow effect. Used for primary actions in hero sections and CTA areas.
Default
tsx
<CTAButton>Let's Talk</CTAButton>Hover Effect
Hover over the button to see the glow effect fade and background darken.
As Link
tsx
<CTAButton href="/contact">Start a Project</CTAButton>External Link
tsx
<CTAButton
href="https://calendly.com/example"
target="_blank"
rel="noopener noreferrer"
>
Book a Call
</CTAButton>Design Details
Structure
Animated rotating border + inner background
Animated Border
Conic-gradient rotating border (6s loop) via .cta-btn-border CSS class. Pauses when isHovered is true.
Typography
28px, semibold weight, with 44px line height
Padding
48px horizontal, 24px vertical (px-12 py-6)
When to Use
Best for:
- Hero section primary actions
- CTA section buttons
- Key conversion points
Avoid for:
- Multiple CTAs in the same section
- Navigation or secondary actions
- Form submissions (use regular Button)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | If provided, renders as a Next.js Link |
target | string | - | Link target (e.g., "_blank") |
rel | string | - | Link rel attribute |
isHovered | boolean | - | Pauses the animated border rotation (default: false) |
children* | ReactNode | - | Button text |
className | string | - | Additional CSS classes |
Import
tsx
import { CTAButton } from '@/components/ui/CTAButton'