Animation · Hover & focus · 15

Button Ripple

Button Ripple = a circular wave that emanates from the click point to confirm the tap with tactile, material-style feedback.

Skip to the modify prompt →

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Add a button ripple: a circular element scales from 1 to 16 and fades out on click, transform and opacity only.

Shift the ripple origin to the bottom-right corner and slow it to a 2.4s ease so it reads as a soft glow rather than a tap.

Spawn the ripple at the exact pointer coordinates on click (set --ripple-x/--ripple-y from the event), cap concurrent ripples, and under prefers-reduced-motion swap to a 120ms background darken. Never animate the button's width or height.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Button Ripple?

A ripple turns a tap into something you can feel. A faint circle blooms from the press point and fades as it grows, the way Material buttons acknowledge a click. Keep it subtle and quick — a ripple that lingers reads as a loading spinner, not feedback.

Animation Specimen

Trigger: click
Tech: css
Duration: 1.8s
Easing: ease-out
Performance: transform, opacity

When to use

Confirming a tap on primary / icon buttons
Material or tactile design languages

Avoid when

On text links — ripples belong on filled controls
When the action already shows a spinner

Origin the ripple at the pointer, not the centre — it feels far more physical.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.ripple-btn {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  font: 600 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #fff;
  background: var(--anim-accent);
  cursor: pointer;
}
.ripple-btn .ripple-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation-name: ripple;
  animation-duration: var(--anim-duration, 1.8s);
  animation-timing-function: var(--anim-easing, ease-out);
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(16); opacity: 0; }
}

<button class="ripple-btn">Click<span class="ripple-dot anim-el"></span></button>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Button Ripple

What is a Button Ripple?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns