Skip to content

component

Outline button

By Gustavo Paiva

Details

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

Introduction

Animated stroke button with glow hover.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750187478/148/228/309/79/15
  • All · #8747