Motion & Effects CSS Keyframes Radial Shimmer 60 FPS Tailwind v4

Shimmer Button

High-performance glowing shimmer button with animated radial light sweep across the surface.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Shimmer Button component to your project via CLI:

terminal bash

npx plain-ui add shimmer-button

Features

✓ Continuous radial light sweep across button face
✓ Rich glow aura on hover and click
✓ Fully customizable color palettes (Cosmic Purple, Emerald, Blue, Dark)
✓ Zero JavaScript dependencies

Variants & Examples

Emerald Shimmer CTA

High-conversion emerald green shimmer button.

shimmer-button-emerald-shimmer-cta.html html

<div class="flex items-center justify-center p-6">
  <button class="group relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white rounded-lg bg-emerald-950 border border-emerald-800/80 shadow-lg shadow-emerald-950/50 hover:shadow-emerald-500/20 active:scale-95 transition-all overflow-hidden cursor-pointer">
    <div class="absolute inset-0 -translate-x-full group-hover:translate-x-full duration-1000 bg-gradient-to-r from-transparent via-emerald-400/25 to-transparent transition-transform pointer-events-none"></div>
    <span class="relative z-10 flex items-center gap-2 text-emerald-100 font-medium">
      <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
      Upgrade Workspace
    </span>
  </button>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
aria-label	string	-	Accessibility label for screen reader users.

Accessibility & Keyboard Navigation

• Fully operable via keyboard Space and Enter keys.
• High-contrast text guarantees WCAG 2.2 AA legibility.

← Border Beam Dock →