How to create a toggle switch with CSS

Key takeaways:

  • CSS provides an efficient, customizable way to create interactive toggle switches without relying on JavaScript, offering a lightweight solution for UI design.

  • The toggle switch is built using an <input> element (checkbox) and a <label> element, with the label acting as the visible toggle interface and the checkbox managing the state.

  • The checkbox is hidden using display: none;, and the label is styled to resemble a rounded toggle switch with smooth transitions for color changes and interactivity.

  • The ::before pseudo-element creates the movable inner circle of the switch, and the transform property is used for smooth animation when toggling between the "on" and "off" states.

  • The toggle switch is highly customizable in terms of size, color, and transition effects, making it suitable for a wide range of web design applications.

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.

<body>
  <span>Toggle Switch:</span>
  <input type="checkbox" id="toggle" />
  <label for="toggle"></label>
</body>

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.

Practice creating toggle switches by trying out this project, Build a Custom Form Maker with MERN Stack, where we create a full stack image-sharing application focusing on styling the application.

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.

#toggle {
  display: none;
}

Step 2: Designing the label as a switch

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

label {
  display: inline-block;
  width: 50px;
  height: 25px;
  background-color: #ccc;
  border-radius: 25px;
  position: relative;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.3s;
}

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.

label::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

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.

#toggle:checked + label {
  background-color: #2196F3;
}

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.

#toggle:checked + label::before {
  transform: translateX(25px);
}

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.

Want to get hands-on practice with HTML and CSS in a real-world application? Try out this project, Build a Microblogging App Using PHP, HTML, JavaScript, and CSS, where we create a microblogging platform with search and admin features.

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.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

Can I customize the size and colors of the toggle switch?

Yes, you do that by adjusting the width, height, background-color, and transform values in the CSS to suit your design preferences.

Is it possible to implement toggle switches without using labels?

While it is technically possible to implement toggle switches without using <label> elements by relying on JavaScript, incorporating <label> elements ensures better accessibility and simplifies the toggle functionality by inherently linking the label to the checkbox.

How can I make the toggle switch accessible for screen readers?

Ensure that the <span> element provides a clear description of the toggle’s purpose. Additionally, consider using aria attributes for enhanced accessibility.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved