Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Create a neon segment that appears to travel around a button by rotating a mostly transparent conic gradient behind the button face. The effect uses HTML and CSS—no JavaScript is required—and can be adapted with your own colors and animation timing.
How the orbit effect works
The button is a stack of layers. A large rotating element carries a conic gradient with a short colored arc and transparent stops elsewhere. The button’s inner face covers most of that element, leaving the arc visible near the perimeter. As the gradient rotates, the visible light appears to move around the border.
On hover, reveal the track and its glow, then inset the face slightly so more of the orbit shows. A small movement on an arrow or other decorative detail can provide extra feedback without competing with the label. The effect separates the animated runner from the readable button surface, so each can be styled independently. See the DEV Community tutorial for the title-specific example.
Build the button in layers
- Create the outer button. Set its dimensions, rounded shape, and positioning context. Keep the actual label inside the button so the control remains understandable without its visual effect.
- Add a track. This layer frames or clips the orbit around the button. It can be visually subdued before hover and revealed with the interaction.
- Place the gradient runner behind the face. Make it larger than the button and center it. Use a
conic-gradient()with transparent portions and a shorter arc of cyan, blue, violet, and magenta. - Add the inner face and content. The face masks most of the oversized runner. Give it a dark background that keeps the label legible, and ensure it sits above the gradient.
- Animate the runner. Rotate it continuously from 0 to 360 degrees with a linear, infinite CSS animation. When the arc passes behind the exposed edge, it creates the orbit illusion.
Reveal and tune the hover state
Use hover styling to reveal the track and layered glow, and move the face inward by a small amount to expose the orbit. CSS transitions can soften those changes; unlike the continuous rotation animation, a transition applies to a named property as it changes state. MDN’s button transition example shows the difference between an immediate change and a gradual one.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The source example uses a 2.2-second orbit. Treat that as a starting point rather than a default for every interface: a shorter or longer duration changes the character of the motion. Adjust the gradient arc and its colors to fit the design, and keep the glow restrained enough that the button label remains the clearest element.
For glow styling, box-shadow adds shadows around the button’s box. A drop-shadow() filter can instead follow the rendered shape of an element. These are different styling tools, not competing methods with an established performance ranking. See MDN’s guides to filter effects and advanced styling effects.
Keep keyboard and motion users in mind
- Show keyboard focus. Do not make hover the only visible interaction state. Use
:focus-visibleto give keyboard users a clear outline; the tutorial’s example uses a 3px cyan outline with a 7px offset. Preserve a similarly distinct indicator if you change the colors or dimensions. - Reduce motion when requested. Add a
@media (prefers-reduced-motion: reduce)rule that removes transitions and disables the orbit animation, as in the tutorial’s example. The button should remain clear and usable without movement. - Keep the label self-explanatory. The neon border is decoration, not the button’s purpose. Maintain readable contrast on the face and use a meaningful label.
MDN’s CSS animations guide covers animation mechanics; the title-specific tutorial demonstrates the reduced-motion rule alongside its orbit effect.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Best Value
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
