INFORMATION & CODE

Simple Toggle Switch Display

What the Code Does

This code provides a clean, modern implementation of interactive UI toggle switches (or sliders) built using HTML and CSS. It displays a centralized container holding two distinct toggle switch variations—one with sharp, squared edges and another with fully rounded, pill-like curves. Both switches feature smooth transition animations that change the background track color from red to green and slide an internal white thumb indicator when clicked.

How the Code Works

The code works by leveraging a standard HTML checkbox input nested inside a label, which is a common technique for creating custom form controls. The actual checkbox input is hidden entirely using CSS (opacity: 0), while a custom <span> element styled with CSS acts as the visible track and sliding handle. The CSS uses pseudo-elements (.track:before) to create the inner sliding button and the adjacent sibling combinator (input:checked + .track) to detect when the user interacts with the toggle, applying smooth positional transforms and color shifts.

How to Use the Code

To use this code, simply copy the HTML markup into the body of your webpage and ensure the CSS is either placed inside a <style> tag in the <head> or saved in a separate styles.css file linked in the document. You can integrate these toggles into forms, settings menus, or dark-mode switchers by listening for standard change events on the hidden checkbox inputs using JavaScript. Additional variations, such as the rounded style, can easily be generated by appending the round class to the track span element.