Animated Button

Overview

AnimatedButton is a Button that pulses — scaling and glowing on a two-second loop — so it is found on a busy or media-heavy screen without the visitor having to read the screen first. It takes every Button prop and passes it straight through, so it is a drop-in wherever a button already works:

<LAnimatedButton>Shop the look</LAnimatedButton>

It defaults to the secondary-white variant, the one designed to sit over media.

Motion that never stops is a strong signal, and it competes with every other thing on the screen for the same attention. One per screen is the intent.

Key Business & UX Benefits

• Draws the eye to a single high-priority action on media-heavy screens, where a static button competes with the imagery behind it.
• Drop-in for Button, so an existing call to action gains the treatment without a markup change.
• Pauses itself on hover and under reduced motion, so the pulse never fights a visitor who has already found the button or asked for less movement.

When it pauses

The pulse stops on its own in the cases where it would work against the visitor:

paused is additive to the other two, so setting it false does not override a reduced-motion preference.

<template>
  <AnimatedButton :paused="isSubmitting">Reserve a seat</AnimatedButton>
</template>

Tuning the pulse

The timing, the three scale steps, and the three glow steps are custom properties on the root, so a theme can retune the pulse without redefining the keyframes:

.my-cta {
  --animated-button-duration: 3s;
  --animated-button-keyframe-2-scale: 1.1;
  --animated-button-keyframe-2-glow: 0 0 24px rgb(0 0 0 / 0.3);
}

Feature List

API Reference