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
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.