How to create a toggle switch with CSS

CSS is a powerful tool that allows us to control the look and layout of our web pages. One useful feature you can create with CSS is a toggle switch. It is a user interface element that allows users to switch between two states, like an on/off switch. Implementing toggle switches using CSS provides a lightweight and customizable solution compared to JavaScript-based alternatives.

In this answer, we will look at how to create a simple yet interactive toggle switch.

Setting up the HTML structure

Before we begin styling the toggle switch, let’s set up the basic HTML structure. We will create an HTML structure using an <input> element of type checkbox and a <label> element to create the toggle mechanism.

The HTML structure consists of the following elements:

• The <span> element provides a descriptive label for the toggle switch, enhancing accessibility and user understanding.

• An <input> element of type checkbox. It serves as the underlying mechanism controlling the toggle state. It is assigned an id of "toggle" for association with the label. This checkbox will be hidden and used to control the state of the toggle switch.

• The <label> element, linked to the checkbox via the for attribute, acts as the visible toggle switch. Clicking the label toggles the checkbox state.

Styling the toggle switch with CSS

With the HTML structure in place, we can apply CSS to style the toggle switch, making it interactive and visually appealing. Styling the toggle switch includes multiple steps, which we will review individually.

Step 1: Hiding the checkbox

First, we’ll hide the default checkbox to allow for a custom-styled switch. In the code below, setting display: none; ensures the checkbox is invisible, allowing the label to serve as the toggle interface.

Step 2: Designing the label as a switch

Next, we'll style the <label> to resemble a toggle switch.

Explanation

• Line 2: The display property is set to inline-block allowing the label to sit in line with other elements while maintaining block properties.

• Line 3–4: The width and height define the size of the switch.

• Line 5: The background-color is set to a neutral color (#ccc) that serves as the default "off" state.

• Line 6: The border-radius property is set to 25px, making the label a fully rounded oval shape.

• Line 7: The position property is set to relative which positions the switch elements correctly for the inner circle.

• Line 8: The cursor property is set to pointer to indicate that it can be interacted with.

• Line 9: The margin-left property is set to get space between the span label and the switch.

• Line 10: The transition property smoothens color changes when toggling.

Step 3: Creating the inner part of the switch

We'll use the ::before pseudo-element to create the movable circle within the switch.

Explanation

• Line 2: Setting the content property to an empty string ensures the pseudo-element is rendered.

• Line 3: The absolute position allows precise placement within the label.

• Line 4–5: The top and left properties add an 3px offset from the top and left edges.

• Line 6–7: The width and height size the element slightly smaller than the label to fit neatly.

• Line 8: The background-color is set to a white, which makes the circle stand out against the switch background.

• Line 9: The border-radius property is set to 50% to create an appropriate-sized circle in the toggle.

• Line 10: The transition property enables smooth movement when toggling.

Step 4: Styling the checked state

When the checkbox is checked, we want the switch to indicate the "on" state by changing color.

The :checked pseudo-class targets the checked state of the checkbox. Using the adjacent sibling selector (+), we change the label's background color to signify activation.

Step 5: Animating the toggle effect

Finally, we’ll add an animation to the toggle effect, making the inner part of the switch move when it is checked.

When the checkbox is checked, this rule selects the inner part of the switch, represented by the ::before pseudo-element. It applies a transformation to the transform property, specifically translating the element along the X-axis by 25px, aligning it with the "on" state. This creates the effect of moving the inner part to the right and animates the toggle effect.

Complete example: toggle switch

Here's the full HTML and CSS code for the toggle switch. Clicking the switch will toggle between the "off" (gray) and "on" (blue) states with a smooth animation.