webdevpuneet.com

Related Snippets

91 in Buttons category
1–6 of 60

AI Mode Glow Button (Google Search Style)

Snap.svg Morphing Icon Button

Popmotion Spring Toggle Switch

Bootstrap Rate-Limited Action Button

Bootstrap HTTP Status Badge

Bootstrap Copy-to-Clipboard Feedback

Shimmer Button — Free HTML CSS JS Animated Border Snippet

Shimmer Button · Buttons · Plain HTML, CSS & JS · Live preview

CategoryButtons
TagsSVGCSS AnimationLoading StatesMicro-Interactions

Copy & paste

Source Code

<div class="sh-stage">
  <button type="button" class="sh-btn">
    <span class="sh-spark" aria-hidden="true"></span>
    <span class="sh-body">
      <span class="sh-shine" aria-hidden="true"></span>
      Get started
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
    </span>
  </button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Rotating spark border
A conic-gradient slice travels around the edge.
GPU-cheap animation
One transform on one element, no repaint.
Hover sheen sweep
A diagonal highlight crosses the label.
Arrow nudge
The icon advances on hover for forward intent.
Click ripple
Web Animations API ripple from the click point.
Self-cleaning nodes
Ripple removes itself on finish.
Correct layering
z-index keeps spark, body, and ripple in order.
Press feedback
A subtle active scale on click.

About this UI Snippet

Shimmer Button — Rotating Spark Border and Sheen Sweep

Screenshot of the Shimmer Button snippet rendered live

The shimmer button is the premium call-to-action seen across modern AI and developer products: a dark pill wrapped in a thin animated light that travels around its border, with a glossy sheen that sweeps across the label on hover. This snippet builds it in plain HTML, CSS, and a touch of vanilla JavaScript, using a conic-gradient technique that stays cheap for the GPU.

The rotating spark border

The animated edge is created with two layers. The outer button holds a .sh-spark element whose ::before is an oversized square (160% of the button, kept square with aspect-ratio: 1) filled with a conic-gradient that is transparent for most of its sweep and bright purple-to-cyan for the final slice. Rotating that square 360° with the shSpin keyframe drags the bright slice around the perimeter. The inner .sh-body sits with a 1.5px margin on top of the spark, so only a thin rim of the rotating gradient peeks out as a glowing animated border — the body itself covers the rest.

Why conic-gradient over an SVG stroke

A rotating conic gradient masked by an inner panel is far cheaper than animating an SVG stroke or a box-shadow: it's a single transform on one element, which the compositor handles on the GPU without repainting. That's why the border can spin continuously without hurting scroll performance, even on a page full of other animations.

The sheen sweep

On hover, a .sh-shine overlay — a diagonal linear-gradient with a bright band in the middle — animates from translateX(-120%) to 120%, sweeping a glossy highlight across the label once. Because it starts and ends fully off the button, you only see the band crossing the face. The arrow icon also nudges right on hover, reinforcing the forward call to action.

A position-aware click ripple

The JavaScript adds tactile feedback. On click it reads the cursor position relative to the button, drops a tiny span there, and animates it with the Web Animations API (element.animate) scaling from 0 to 26× while fading out — a Material-style ripple that emanates from exactly where you clicked. The ripple element removes itself in the onfinish callback, so no nodes accumulate. Using animate() instead of CSS keyframes keeps the ripple self-contained and avoids managing extra classes.

Layering and isolation

The button uses overflow: hidden to clip the spark and ripple to its rounded shape, and isolation: isolate to keep the stacking context self-contained. The z-index order — spark at 0, body at 1, ripple at 2 — guarantees the ripple draws over the body while the spark stays behind it. The :active scale gives a subtle physical press.

Customizing it

Recolor the conic stops to change the spark, slow or speed the shSpin duration, widen the body margin for a thicker border, or adjust the sheen angle and speed. Make it a link by swapping <button> for <a> — the effects don't depend on the element. Pair it with a neo-brutalist card or place it inside an animated gradient CTA for a cohesive, high-end look.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA dark button renders with a thin light traveling around its border.
  2. 2
    Hover the buttonA glossy sheen sweeps across the label and the arrow slides right.
  3. 3
    Click itA ripple expands from exactly where you clicked.
  4. 4
    Recolor the sparkEdit the conic-gradient stops to match your brand.
  5. 5
    Adjust the speedChange the shSpin duration for a faster or calmer border.
  6. 6
    Use as a linkSwap button for an anchor; the effects still work.

Real-world uses

Common Use Cases

Primary calls to action
Headline an animated gradient CTA with a dark pill whose border carries a travelling conic-gradient spark.
AI product landing pages
Pair with a feature tabs showcase for the premium look seen across modern AI and developer products.
Pricing card actions
Use as the action on a pricing card, with a diagonal sheen sweeping the label on hover and an arrow that nudges forward.
Hero section buttons
Place under a lamp header title, using a single transform on one element so the animation stays cheap on the GPU.
Submit button upgrades
Replace a plain loading button on sign-up, and use it as a reference for the conic-gradient animated border technique.

Got questions?

Frequently Asked Questions

An outer spark layer has a ::before that is an oversized square filled with a conic-gradient — transparent for most of its sweep and bright for one slice. Rotating that square 360 degrees drags the bright slice around the perimeter. An inner body panel with a 1.5px margin covers everything except a thin rim, so only that glowing edge shows.

Rotating one conic-gradient element is a single GPU transform with no repaint, whereas animating an SVG stroke or a box-shadow forces repaints each frame. That's why the border can spin continuously without hurting scroll or competing animations, even on lower-end devices.

The click handler reads the pointer position relative to the button via getBoundingClientRect, places a small span at that point, and animates it with the Web Animations API from scale 0 to 26 while fading out. The element removes itself in the animation's onfinish callback, so ripples never accumulate in the DOM.

Yes. None of the effects depend on the button element — swap <button> for an <a href>. Keep the same class structure so the spark, body, sheen, and ripple markup line up. If you do, ensure the link has a visible focus style for keyboard users since the demo relies on the native button focus ring.

The markup and CSS port directly as a reusable Button component. Implement the ripple in the click handler using element.animate on a ref, or extract it to a small hook/composable. In Tailwind, define the conic spin keyframe in the config, build the border with an absolute spark layer plus an inset body, and animate the sheen with a translate-x utility on group-hover.