Stellar Eclipse Button — CSS Animation with Source Code
The Stellar Eclipse Button is a cinematic UI component that transforms your interface into a celestial event. On hover, a “moon” slides across a “sun,” triggering a total solar eclipse. This effect is accompanied by a global background darkening and the reveal of a pulsing, ethereal corona around the eclipsed center.
How It Works
This effect uses CSS transitions and the :has() selector (supported in modern browsers) to create a coordinated interaction across the whole page. The sun is a static radial gradient, while the moon is an absolutely positioned circle that transitions its left property from the side to the center. The corona is a blurred glow with a opacity transition and a scale keyframe animation that activates specifically during the hover state.
Use Cases
- “Night Mode” toggle with high personality
- “Mystery” or “Secret” reveal primary buttons
- Themed hero sections for space, astrology, or cinematic projects
- High-end creative agency portfolios
How to Customize
- Adjust Eclipse Duration: Change the
transitiontime on the.moonclass (currently1.2s). - Global Darkness: The
body:has(.eclipse-btn:hover)selector handles the full-screen darkening. You can change the secondary color to a deep purple or navy instead of pure black. - Corona Intensity: Modify the
blurandscalevalues in the.coronaclass and@keyframes corona-pulse.
Frequently Asked Questions
Does :has() work in all browsers?
As of 2026, :has() is supported in all major evergreen browsers (Chrome, Edge, Safari, and Firefox). For older browsers, the button interaction will still work locally, but the global background color change will gracefully degrade.
Can I add a “clicking” effect?
Yes! You can add an :active state to the .sun or .moon to make them “shake” or “emit a flare” when the user clicks the button during the eclipse.
Is it accessible?
Yes. It remains a standard <button> element. Ensure you add an aria-label if the text content isn’t descriptive enough for screen readers.
