The button is the most important moment on a site: the point where a visitor decides whether to click. A small micro-interaction there - a button that reacts, invites, gives feedback - can be the difference between a click and a scroll-away.

And like the previous posts (text and images), here too: every effect is live, with no plugin, on a fast page. Click, hover, play with the speed - and if something fits your site, one click and we know.

All effects respect the prefers-reduced-motion setting.

Button micro-interactions

Magnetic Buttonmagnetic

InteractiveA main CTA - sticks to the cursor and invites a click

↖ Hover to tilt
IntensitySubtleStrong
Want this? →
Show code
btn.onpointermove = e => {
  const r=btn.getBoundingClientRect();
  btn.style.transform=`translate(
    ${(e.clientX-r.left-r.width/2)*.4}px,
    ${(e.clientY-r.top-r.height/2)*.4}px)`; };

Rippleripple

InteractiveInstant feedback on click

↓ Click the button
SpeedFastSlow
Want this? →
Show code
btn.onclick = e => {
  const s=document.createElement('span'); s.className='ripple';
  s.style.left=e.offsetX+'px'; s.style.top=e.offsetY+'px';
  btn.appendChild(s); setTimeout(()=>s.remove(), 600); };
/* .ripple { animation: ripple var(--dur,.6s); } */

Fill Sweepfill-sweep

InteractiveSecondary buttons - fill in on hover

↖ Hover to tilt
SpeedFastSlow
Want this? →
Show code
.btn { position:relative; z-index:0; }
.btn::before { content:''; position:absolute; inset:0; z-index:-1;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur,.4s); }
.btn:hover::before { transform: scaleX(1); }

Border Drawborder-draw

InteractiveElegant outline buttons

↖ Hover to tilt
SpeedFastSlow
Want this? →
Show code
.btn::after { content:''; position:absolute; inset:0;
  border:2px solid var(--accent); clip-path: inset(0 0 0 100%);
  transition: clip-path var(--dur,.5s); }
.btn:hover::after { clip-path: inset(0); }

Glow Pulseglow-pulse

LoopDraw attention to one important button

SpeedFastSlow
Want this? →
Show code
.btn { animation: pulse var(--dur,2s) ease-in-out infinite; }
@keyframes pulse { 50% {
  box-shadow: 0 0 0 4px rgba(59,217,255,.15),
              0 0 24px 2px rgba(59,217,255,.5); } }

Shineshine-btn

LoopA premium feel - a button that gleams

SpeedFastSlow
Want this? →
Show code
.btn::before { content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 40%,
    rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: shine var(--dur,2.5s) linear infinite; }

Onward

This is the third category in the menu. There are already effects for text and images, and next we’ll add effects for whole sections, backgrounds and numbers.

Want a few of these on your site? They are part of the build with us - let’s talk.