Skeuomorphic 3D Elastic Toggle Switch

This is a Skeuomorphic 3D Elastic Toggle Switch. It utilizes multi-layered shadowing and complex keyframe sequences to mimic a physical sliding component embedded in a technical grid. Its function is to transform a standard checkbox into a high-fidelity micro-interaction that emphasizes physical mass and momentum.

Specs

• Weight: ~3 KB. No external dependencies.
• Performance: High. All visual transitions are handled by the CSS compositor via transform and background-color.
• Theming / Customization: Easily adjustable through HSL variables (--off, --on, --mid) and font-size for global scaling.
• Responsiveness: Inherently fluid. Built with em units, allowing the component to scale perfectly relative to its container’s text size.
• Graceful Degradation: Fails to a standard checkbox input. The pristine class management ensures no unwanted animations play during the initial page render.

Anatomy

The component is built using a “ghost input” approach where the pseudo-elements carry the visual weight.

• HTML (The Skeleton): A single <input type="checkbox"> element. No extra wrappers required.
• CSS (The Skin): Extensive use of box-shadow (both inset and outset) to create depth. The background uses a technical blueprint-style grid generated by linear-gradient.
• JS (The Nervous System): A minimalist script that removes the .pristine class upon the first click, enabling transitions only after user intent is established.

Logic

The standout technical feature is the “Transparent Window” illusion created via background-attachment.

body, input[type=checkbox]:before {
	background-image: linear-gradient(...);
	background-size: 0.75em 0.375em;
}
input[type=checkbox]:before {
	background-attachment: fixed;
}

By applying the same background pattern to both the body and the toggle handle (:before), and setting the handle’s background to fixed, the handle appears as a transparent lens or an opening in the surface. The grid inside the handle perfectly aligns with the grid on the background, creating a seamless, high-precision aesthetic that suggests the handle is a cutout showing the layer beneath.

Feel

Tactile and industrial. The cubic-bezier(0.6, 0, 0.4, 1) timing function provides a snappy start with an elastic deceleration. During the slide, the handle momentarily stretches to 2em width (50% keyframe), simulating physical tension and rubber-like elasticity before snapping into its final position.