Extended Module

Interaction

Focus rings, active press states, and focus-within container effects for polished keyboard and pointer interactions. Pairs perfectly with hover effects for full interaction coverage.

gleam-interaction.css focus-visible active states focus-within 
<!-- Focus ring variants (keyboard navigation) -->
<button class="focus-ring">Standard Ring</button>
<button class="focus-glow">Glow Ring</button>
<button class="focus-animate">Pulse Ring</button>

<!-- Active / press states -->
<button class="active-scale">Scales on click</button>
<button class="active-push">Pushes down>
<button class="active-brighten">Brightens</button>

<!-- Focus-within (container reacts to child focus) -->
<div class="focus-within-border">
  <input type="text" placeholder="Click to focus"/>
</div>

Focus Rings

These activate only on :focus-visible — keyboard navigation only. Tab into the buttons below to see each ring style.

focus-ring

Standard 2px outline ring with offset

focus-glow

Soft box-shadow glow ring

focus-animate

Animated pulse ring that fades out

Active / Press States

Press and hold the buttons to see the active state. These fire on pointer down and release immediately on pointer up — giving tactile click feedback.

active-scale

Scales to 96% on press

active-push

Translates down 2px (3D push)

active-brighten

Brightness 1.1 on press

Focus-Within

The container reacts when any child element gains focus. Perfect for form fields, search bars, and input groups. Click inside each box to trigger.

focus-within-border

Container border highlights on focus

focus-within-glow

Box-shadow glow on container

focus-within-scale

Container scales up 2% on focus

Complete CTA Button Pattern

Layer interaction classes with hover effects and entrance animations for a fully polished interactive element. Tab in, hover, and click to see all three states.

<button class="gleam entrance-fade-up hover-lift active-scale focus-glow">
  Get Started
</button>

<!-- Tab → focus-glow  |  Hover → hover-lift  |  Click → active-scale -->

Accessibility Note

All focus effects use :focus-visible — they only show for keyboard navigation, not on mouse click. This matches browser behavior: visible focus rings appear when navigating with Tab/arrow keys, and are suppressed for pointer interactions. Never use outline: none without a replacement focus style.