Coyote originalNewCSS only · radial-gradient · transform
Moonrise
Our dusk palette, in motion: on hover a soft moon rises from the bottom edge and a horizon line draws itself across.
- Class
.CCMoonrise- Weight
- 1.1 KB
- Needs
- CSS only
- Best for
- Cards, calls to action, night-time brands
Tune it
Every snippet on this page follows these settings.
How Moonrise works
- A circle three-quarters the width of the element sits mostly below its bottom edge, hidden by overflow: hidden.
- It's filled with a soft radial gradient from the second accent into the first, fading to nothing.
- On hover it slides up, so only its top arc shows: the moon clearing the horizon.
- A one-pixel line scales out from the centre along the bottom edge at the same time.
Add it to your site
- Add the styles. Link
https://coyoteconcept.com/lab/cc-lab.cssonce, or paste the CSS from any snippet below. - Set a colourway. Wrap your content in
class="CCTheme CCEmber", or any other colourway. - Add the classes. For example
<button class="CCButton CCMoonrise">. - That’s it. Moonrise is CSS only.
Core components
Moonrise on card, button, input, tabs, dropdown.
More ways to use it
The same class on image card, modal, nav bar.
Pairs well with
Avoid on the same element Ember Sparks (clipping), Border Beam (::after), Glare Sweep (::after), Spotlight (::after, ::before), 3D Tilt (::after).
Browser support
| Chrome & Edge | 111+ |
|---|---|
| Safari | 16.2+ |
| Firefox | 113+ |
Older browsers show the element without the effect: nothing breaks.
Accessibility
- Purely decorative: no change to the content or its contrast.
- Plays on keyboard focus inside the element.
- Under reduced motion the moon appears without travelling.
Performance
- 1.1 KB of code, no libraries.
- Animates transforms, opacity and gradients, which browsers handle cheaply.
- This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.
Questions about Moonrise
How do I add Moonrise to a button?
Add the class CCMoonrise next to CCButton, inside an element with the CCTheme class, then include the Moonrise CSS. The Copy button on this page gives you all of it in one snippet.
Does Moonrise need JavaScript?
No, it's CSS only.
Which browsers support Moonrise?
Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.
Is Moonrise accessible?
Purely decorative: no change to the content or its contrast. Plays on keyboard focus inside the element. Under reduced motion the moon appears without travelling.