Galaxy Button
Galaxy Button is a button in the UI HUB buttons collection. A button whose surface is filled with a miniature starfield and nebula glow that drifts slowly. On hover, stars increase brightness and the nebula pulses.
The component is driven by 5 documented props (children, className, starCount, nebulaColor, onClick), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas or DOM particle system inside button; Star drift physics (slow floaty movement); Nebula radial gradient on hover.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Galaxy Button?
Button with an embedded living galaxy particle effect. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Galaxy Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Galaxy Button works
A button whose surface is filled with a miniature starfield and nebula glow that drifts slowly. On hover, stars increase brightness and the nebula pulses.
Technical information for Galaxy Button
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, CSS gradients, CSS filters |
| State change | dim drifting starfield to brightened pulsing galaxy on hover |
| Props | 5 configurable |
| Usage example | Included on this page |
What Galaxy Button requires
- Canvas or DOM particle system inside button
- Star drift physics (slow floaty movement)
- Nebula radial gradient on hover
- Click ripple from center
How to use Galaxy Button
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <GalaxyButton /> in your page using that import path.
- Pass any of the 5 documented props to change colours, density, speed or behaviour.
Galaxy Button questions
What is Galaxy Button?
Button with an embedded living galaxy particle effect. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Galaxy Button work?
A button whose surface is filled with a miniature starfield and nebula glow that drifts slowly. On hover, stars increase brightness and the nebula pulses.
Which category does Galaxy Button belong to?
Galaxy Button is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the children prop do in Galaxy Button?
Button label. It defaults to "Galaxy".
What does the className prop do in Galaxy Button?
Additional CSS classes. It defaults to "".
Is Galaxy Button free to use?
Galaxy Button is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Galaxy Button use?
Galaxy Button uses Framer Motion and is styled with Tailwind CSS.
What does Galaxy Button need to run?
Galaxy Button needs Canvas or DOM particle system inside button, Star drift physics (slow floaty movement), Nebula radial gradient on hover and Click ripple from center.