Components / Motion / Glow Button

Glow Button beta

A call-to-action in a ring of traveling light: a conic border that orbits, and a glow that answers the hover.

Preview 
<div style="display:flex;flex-direction:column;gap:20px;padding:10px 0">
  <span><span class="k-glowbtn"><button type="button">Upgrade to Pro</button></span></span>
  <label class="k-glowfield"><span class="in">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.8-3.8"/></svg>
    <input type="search" placeholder="Focus me — the ring wakes up" aria-label="Search the catalog">
  </span></label>
</div>
/* KATA Glow Button — a ring of light, on duty. */
@property --k-ga{syntax:"<angle>";initial-value:0deg;inherits:false}
.k-glowbtn{display:inline-block;padding:2px;border-radius:13px;background:conic-gradient(from var(--k-ga), var(--k-accent) 0 14%, transparent 30%, var(--k-zinc-300) 50%, transparent 70%, var(--k-accent) 88% 100%);animation:k-ga-spin 3.6s linear infinite;transition:box-shadow .3s;font-family:var(--k-font)}
.k-glowbtn:hover,.k-glowbtn:focus-within{box-shadow:0 0 26px -6px var(--k-accent)}
.k-glowbtn button{display:block;border:0;background:var(--k-zinc-950);color:var(--k-on-color);font-family:inherit;font-size:14.5px;font-weight:650;padding:12px 26px;border-radius:11px;cursor:pointer}
@keyframes k-ga-spin{to{--k-ga:360deg}}
.k-glowfield{display:flex;align-items:center;gap:9px;max-width:330px;padding:2px;border-radius:11px;background:var(--k-line);transition:background .3s, box-shadow .3s;font-family:var(--k-font);color:var(--k-ink-3)}
.k-glowfield:focus-within{background:conic-gradient(from var(--k-ga), var(--k-accent), var(--k-line) 40%, var(--k-accent));animation:k-ga-spin 3.6s linear infinite;box-shadow:0 0 18px -4px var(--k-accent-bg)}
.k-glowfield .in{flex:1;display:flex;align-items:center;gap:9px;background:var(--k-bg);border-radius:9.5px;padding:0 12px}
.k-glowfield input{flex:1;border:0;background:none;font-family:inherit;font-size:13.5px;height:38px;color:var(--k-ink);outline:none;min-width:0}
@media (prefers-reduced-motion:reduce){.k-glowbtn,.k-glowfield:focus-within{animation:none}}

Installation

CLI

node kata-ui.mjs add glow-button

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

One per page — the action the page is for. The ring is a conic gradient rotating behind a 1.5px frame (an @property angle, so it animates smoothly), and the halo is a plain box-shadow that deepens on hover and focus. The example below shows the same ring as a field treatment: the glow belongs on the control that matters, not on all of them.

Accessibility

The button’s name, size and focus ring are untouched — focus shows the standard outline outside the glow. The orbit is decorative and stops under prefers-reduced-motion, leaving a still, lit border that reads as emphasis, not as a state.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-glowbtnclass
.k-glowfieldclass
.inclass
aria-hiddenARIA
aria-labelARIA

Related parts

Accordion Gallery beta

Five scenes in a row; the one you touch opens up and tells its caption.

galleryaccordionexpandpanelshover

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Blur In beta

Words arrive out of focus and sharpen one after another, like eyes adjusting.

blurrevealtextfocusentrance
Previous
Follow Frame