Skip to main content

​
Overview

Glass Shimmer Button layers a frosted-glass backdrop with an infinitely looping shimmer streak and static gloss edge highlights to create a premium translucent appearance. It extends the native <button> element, forwarding all HTML button attributes.

​
Installation

npx rareui@latest add glass-shimmer-button
Or copy the component source manually into components/rareui/glass-shimmer-button.tsx.

​
Usage

import { GlassShimmerButton } from '@/components/rareui/glass-shimmer-button';

export default function App() {
  return (
    <GlassShimmerButton onClick={() => alert('Clicked!')}>
      Click Me
    </GlassShimmerButton>
  );
}
This component uses a self-contained <style jsx> block for the glass-shimmer keyframe animation, so no global CSS setup is required.

​
Props

​
children
React.ReactNode
The content rendered inside the button label.
​
className
string
Additional Tailwind classes merged with the default button styles via cn.
​
...props
React.ButtonHTMLAttributes<HTMLButtonElement>
Any standard HTML button attribute — onClick, disabled, type, aria-*, etc.

​
Examples

​
Default usage

<GlassShimmerButton>Get Started</GlassShimmerButton>

​
With click handler and disabled state

<GlassShimmerButton
  onClick={() => console.log('clicked')}
  disabled={isLoading}
>
  {isLoading ? 'Loading…' : 'Submit'}
</GlassShimmerButton>

​
Extended with custom class

<GlassShimmerButton className="w-full">
  Full Width
</GlassShimmerButton>

​
Features

Continuous shimmer animation

A glass-shimmer keyframe sweeps a white gradient across the button on a 2.5-second infinite loop.

Glassmorphism design

backdrop-blur-md and semi-transparent backgrounds deliver a premium frosted-glass aesthetic.

Hover and active states

Scales up 5% on hover and down to 95% on press for satisfying tactile feedback.

Static gloss edges

1px gradient lines at the top and bottom borders simulate a physical glass edge highlight.

Dark mode support

Background and text opacities are tuned independently for light and dark themes.

Self-contained styles

Keyframe animation is scoped inline — no global stylesheet changes needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us