Shimmer Button
Overview
A streak of light that travels around the border; slight scale-up on hover and the arrow slides forward. Made for a hero primary button.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Shimmer Button to your project in your colors.
Where to use it
Call-to-action buttons for sign-ups, checkout, form submission and landing pages, whenever you need a primary action people want to click.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add shimmer-button
mcp › Use 8pt MCP to call get_component("shimmer-button")
Code
Source for Shimmer Button. Motion uses only transform and opacity and respects the Reduce motion setting.
<button class="x-shim" type="button"> <span class="x-shim__glow" aria-hidden="true"></span> <span class="x-shim__label">Start building <i aria-hidden="true">→</i></span> </button>
.x-shim{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:999px;padding:15px 30px;background:#0b0b10;color:#fff;font:600 15px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;box-shadow:0 10px 40px -12px var(--d-accent,#4D74FF);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.x-shim:hover{transform:scale(1.04)}
.x-shim:active{transform:scale(.98)}
.x-shim__glow{position:absolute;left:50%;top:50%;width:320%;aspect-ratio:1;z-index:-2;background:conic-gradient(from 0deg,transparent 0 68%,#7f6bff 78%,#7cf3ff 86%,transparent 94%);transform:translate(-50%,-50%) rotate(0);animation:x-shim-spin 2.8s linear infinite}
.x-shim::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#1a1a24,#0b0b10)}
.x-shim__label{display:inline-flex;align-items:center;gap:8px}
.x-shim__label i{font-style:normal;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.x-shim:hover .x-shim__label i{transform:translateX(4px)}
@keyframes x-shim-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}const init = (root) => {};Subscribe to Builder to see the full source.See pricing