Outline button

Outline button

About Outline button

Continuous Animated Stroke

A smooth border animation that continuously travels around the component without visible resets, creating a dynamic and modern interface effect.

Fully Customizable Motion

Control animation duration and easing style directly in Framer, including linear, ease-in, ease-out, and ease-in-out behaviors.

Interactive Hover Effects

When hovered, the border smoothly closes around the button while the background and text colors transition for a clean interaction.

Glow Effects

Add glow lighting effects to the border using configurable blur, color, and position settings for a polished UI highlight.

Adjustable Hover Speed

Control how fast the stroke closes during hover interactions to create anything from subtle transitions to snappy button feedback.

Link Ready

Includes a built-in link property, allowing the component to function as a fully interactive navigation element.

Framer Native Controls

All visual settings are exposed directly in the Framer properties panel, making customization easy without editing code.

Perfect For

  • call-to-action buttons

  • hero section links

  • interactive UI elements

  • modern landing pages

  • product highlights