3D Neumorphic Pill Toggle Switch

This is a 3D Neumorphic Pill Toggle Switch. It replaces the default browser checkbox with a tactile, extruded slider mechanism. Its function is to govern binary states (on/off) while providing physical, hardware-like visual feedback to ground the digital interaction in reality.

Specs

• Weight: < 1 KB. Pure CSS and HTML.
• Performance: High. Uses transform for movement and interaction states, avoiding layout reflows.
• Theming / Customization: Controlled via a clean set of CSS variables (--pill-width, --pill-height, --knob-size, --accent) at the root component level.
• Responsiveness: Static pixel dimensions. Will require media queries or scalable units (em/rem) for fluid mobile layouts.
• Graceful Degradation: [!] The native <input> is hidden using display: none. This completely removes the element from the accessibility tree, making keyboard navigation (Tab focus) impossible. For production, opacity: 0 and position: absolute should be used instead.

Anatomy

• HTML: A semantic <label> acts as the hit area, wrapping a hidden <input type="checkbox"> and the visual tracks (.track, .pill, .pill-surface).
• CSS: The architectural engine. It builds volumetric depth using multi-layered box-shadow (combining inset highlights and drop shadows). linear-gradient backgrounds simulate directional lighting on a curved physical surface.

Logic

The standout logic is the declarative translation of mouse events into mechanical physics via the CSS “checkbox hack” and active states.

.pill-toggle input:active + .track .pill {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 var(--accent),
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

When the user clicks, the :active pseudo-class triggers a micro-interaction. The translateY(2px) pushes the pill down, while the box-shadow values are simultaneously reduced to simulate the physical compression of the mechanism. This state change happens independently of the :checked state, meaning the user feels the resistance of the button before the switch slides to its new position.

Feel

Tactile and mechanical. Hovering slightly lifts the pill, signaling its interactive nature. Pressing the mouse down delivers a satisfying, weighty depression, akin to activating a spring-loaded switch on a physical synthesizer. The cubic-bezier easing on the horizontal slide provides a subtle, elastic snap when the state locks into place.