CTA Button
Buttonsinline sandboxAn animated call-to-action button with a traveling arrow and expanding background effect. Perfect for hero sections and prominent action triggers.
cta button
call to action
animated button
hover animation
framer motion button
Preview
Uses cn() utility from shadcn/ui. Make sure you have it installed.
Customize arrowTravelDistance to match your button width. Default works well for label + highlightLabel text.
Installation
Use the shadcn CLI to install this component:
npx shadcn@latest add https://messyui.dev/r/cta-button.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Browse" | Main label text shown on the button |
| highlightLabel | string | "Components" | Highlighted/italic portion of the label with serif font |
| bgColorHex | string | "#ff2056" | Background color hex value for the hover state |
| arrowBgColorBefore | string | "#efb100" | Arrow container background color before hover |
| arrowTravelDistance | string | "calc(100% + 7.8rem)" | How far the arrow travels on hover (CSS calc value) |
| textShift | number | -30 | How much the text shifts left on hover (in pixels) |
| duration | number | 0.3 | Animation duration in seconds |
| textColorAfter | string | "#fff" | Text color after hover (hex value) |
| iconColorBefore | string | "#000000" | Icon color before hover (hex value) |
| iconColorAfter | string | "#fff" | Icon color after hover (hex value) |
| className | string | "" | Additional className for the button |