Neon Glow Toggle Switch

This is a Neon Glow Toggle Switch. It replaces a standard HTML checkbox with a highly tactile, skeuomorphic control. Its function is to provide satisfying visual feedback for state changes, utilizing a “filling” neon border and a sliding, textured handle to make binary selections feel like engaging physical hardware.

Specs

• Weight: ~2 KB. Zero dependencies. No JavaScript.
• Performance: High. State transitions (transform, box-shadow, and custom properties via @property) are handled efficiently by the browser’s CSS engine.
• Theming / Customization: Exceptional. A single inline variable (--color: #0f0) dictates the entire neon glow. The base grey palette is hardcoded but easily overwritten.
• Responsiveness: Fluid. Scaled entirely using em units relative to the font-size: 3rem declaration, making it trivial to resize for any layout.
• Graceful Degradation: Integrates prefers-reduced-motion to kill animations for accessibility. In older browsers lacking @property support, the neon border will snap instantly rather than sweeping smoothly, but the toggle remains fully functional.

Anatomy

The component uses a “zero-wrapper” approach, styling the native input directly using pseudo-elements to maintain semantic purity.

• HTML (The Skeleton): A raw <input type="checkbox" role="switch">. The role ensures screen readers interpret the checkbox correctly as a toggle.
• CSS (The Skin): The input itself acts as the recessed track. The ::before pseudo-element creates the sliding handle (with complex radial and repeating-linear gradients to simulate a textured grip). The ::after pseudo-element generates the neon border ring.
• JS (The Nervous System): Completely absent. The :checked and :hover pseudo-classes drive all state logic.

Logic

The standout technical feature is the Animated Conic-Gradient Mask.

@property --x { syntax: '<angle>'; initial-value: 1deg; inherits: true; }

.neon::after {
  border: 0.1em solid var(--color);
  -webkit-mask: conic-gradient(from calc(270deg - var(--x)), #000 calc(2 * var(--x)), #0001 0);
}

.neon:checked {
  --x: 180deg;
}

Instead of using SVG stroke-dasharray to animate the border, the developer creates a full solid border on the ::after element and applies a conic-gradient as a mask. By declaring --x as an <angle> via @property, the browser knows how to smoothly interpolate its value. When the switch is checked, --x animates from 1deg to 180deg. The calc(2 * var(--x)) logic in the mask dynamically widens the visible slice of the border, making the neon light appear to “sweep” around the pill shape starting from the left edge.

Feel

Tactile, mechanical, and electric. The handle features a meticulously crafted drop shadow that shifts sides depending on whether the switch is on or off (inset -0.05em 0em... vs inset 0.05em 0em...), giving it physical mass and simulating a directional light source. The hover state triggers a faint “pre-glow” (--c: #0ff5), mimicking the behavior of a gas tube warming up before fully igniting on click.