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

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

Usage

This component uses a self-contained <style jsx> block for the glass-shimmer keyframe animation, so no global CSS setup is required.

Props

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

Examples

Default usage

With click handler and disabled state

Extended with custom class

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.