Skip to content

Outline button

Animated stroke button with glow hover.

Outline button preview image 1

Summary

Animated stroke button with glow hover.

Description

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

Rank history How rankings work →

1500110001112478/149/49/2610/1811/9
  • All · #11247

Details

More like this