Design Atlas
한국어
✦ Visual effects

Shimmer button

시머 버튼

A CTA button with a slowly rotating gradient ring and a bright band of light sweeping across it on a loop.

Also known as: Shiny CTA buttonGlimmer button
···
html
<button class="shim" id="sb">Get started</button>
css
.shim{--a:0deg;position:relative;overflow:hidden;border:0;cursor:pointer;padding:16px 36px;border-radius:999px;
  font-weight:700;font-size:15px;color:#fff;isolation:isolate;
  background:conic-gradient(from var(--a),var(--accent),var(--accent-2),var(--accent-3),var(--accent))}
.shim::before{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--bg);z-index:-1}
.shim::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(75deg,transparent,rgba(255,255,255,.65),transparent);
  animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}55%,100%{left:140%}}
js
const el = document.getElementById('sb');
let a = 0;
(function loop(){ a = (a + 0.9) % 360; el.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); })();

A CTA button treatment where a bright diagonal band of light repeatedly sweeps across the surface, paired with a slowly rotating gradient ring for extra visual weight — the button that says "press me."

It builds the ring the same way as a gradient border: a dark solid fill covers the centre, leaving only the border's thickness showing the conic-gradient underneath. On top, a narrow white band clipped by overflow: hidden slides across repeatedly for the sweep. Give the ring's rotation and the sweep's travel different speeds, or their rhythms line up and start looking mechanical.

Where shine sweep is used sparingly across many kinds of surfaces (typically once on hover), a shimmer button is built specifically for a CTA and loops continuously to keep drawing the eye.

When to use

Use it for the page's single primary CTA, like "Start free trial." Applying it to multiple buttons makes every one feel less important — limit it to one per page.