Create the orbit with a mostly transparent conic-gradient() on a rotating layer behind the button face. On hover, reveal the track and inset the face slightly so a bright arc appears to travel around the edge. The effect uses HTML and CSS—no JavaScript is required.
How the neon orbit effect works
The button is a stack of layers, each with a separate job: an outer control, an orbit track, a rotating gradient runner, an inner face that masks most of the runner, and readable button content. The runner is larger than the button and centered behind its face. Because most of its conic gradient is transparent, only a colored arc is visible where the face no longer covers it.
As an Amazon Associate I earn from qualifying purchases.
Rotation makes that arc appear to travel around the perimeter. Hover reveals the track and glow, while a small inward movement of the face exposes more of the runner. The example below follows that construction; adjust the colors, inset, and timing to fit your interface.
Build the button in layers
HTML structure
Keep the label in its own content layer so it remains above the animated background. This example also includes an arrow as optional supplementary feedback.
#1 Best Overall
<button class="orbit-button" type="button">
<span class="orbit-track" aria-hidden="true">
<span class="orbit-runner"></span>
</span>
<span class="orbit-face"></span>
<span class="orbit-content">
<span>Explore features</span>
<span class="orbit-arrow" aria-hidden="true">→</span>
</span>
</button>CSS layers and animation
The track frames the oversized runner, and the face sits above it. The transparent portions of the gradient let the button’s dark surface show through; the cyan-to-magenta arc supplies the moving highlight.
.orbit-button {
--orbit-duration: 2.2s;
position: relative;
isolation: isolate;
display: inline-grid;
place-items: center;
min-height: 3.25rem;
padding: 0.9rem 1.4rem;
border: 0;
border-radius: 999px;
color: #fff;
background: transparent;
cursor: pointer;
}
.orbit-track,
.orbit-face,
.orbit-content {
position: absolute;
border-radius: inherit;
}
.orbit-track {
inset: 0;
overflow: hidden;
opacity: 0;
transition: opacity 220ms ease;
}
.orbit-runner {
position: absolute;
width: 220%;
aspect-ratio: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: conic-gradient(
from 0deg,
transparent 0deg 285deg,
#00e5ff 300deg,
#2979ff 320deg,
#9b4dff 340deg,
#ff35bc 352deg,
transparent 360deg
);
animation: orbit-spin var(--orbit-duration) linear infinite;
}
.orbit-face {
z-index: 1;
inset: 2px;
background: #10121a;
transition: inset 220ms ease, background-color 220ms ease;
}
.orbit-content {
z-index: 2;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: inherit;
}
.orbit-arrow {
transition: transform 220ms ease;
}
@keyframes orbit-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.orbit-button:hover .orbit-track {
opacity: 1;
}
.orbit-button:hover .orbit-face {
inset: 5px;
background-color: #151927;
}
.orbit-button:hover .orbit-arrow {
transform: translateX(3px);
}
.orbit-button:focus-visible {
outline: 3px solid #00e5ff;
outline-offset: 7px;
}
@media (prefers-reduced-motion: reduce) {
.orbit-runner {
animation: none;
}
.orbit-track,
.orbit-face,
.orbit-arrow {
transition: none;
}
}The 2.2-second duration is an example value, not a universal setting. A shorter duration makes the orbit move faster; a longer one slows it down. The arc’s stop positions and colors control how much of the runner lights up. Check the result at the actual button dimensions: an oversized runner gives the face room to mask the gradient while leaving the edge exposed.
Make hover, keyboard, and motion states usable
Hover is not a keyboard interaction. Keep a visible :focus-visible outline so people navigating with a keyboard can identify the focused control. The example uses a 3px cyan outline with a 7px offset; choose a color and offset that remain distinct from nearby elements in your design.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe reduced-motion media query stops the continuous rotation and removes transitions for users who request less motion. The orbit can still appear on hover as a static highlight. Keep the button’s label legible against its face, and do not rely on the neon border alone to explain what the control does.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Tune the glow without obscuring the button
Use transitions for changes such as track opacity, face inset, or arrow position; use an animation for the continuing rotation. A transition names the property and duration, while the animation can loop independently. See MDN’s guides to CSS transitions and CSS animations.
For glow styling, box-shadow adds shadows around the button’s box. A drop-shadow() filter follows an element’s rendered shape instead, which can suit an irregular layer. These are different styling choices, not evidence of a performance advantage for either approach. MDN documents filter effects and box shadows.
Quick Recap
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.
