How to create a simple toggle switch with pure CSS

navya , Credit to  volkotech-solutions Jun 22
toogle switch banner image

A toggle switch is a useful way to enable or disable a feature of a web application. In this article, you are going to know how to implement this with pure CSS.

In this blog, you can get the simple toggle switch functionality.

Toggling is just selecting and deselecting a particular functionality. For example, if you want to switch from light mode to dark mode we will use this toggle switch. We are frequently using this toggle switch in our mobile applications to change the required settings. Click here to get the dark-mode functionality with JS. 

Let’s move on to the goal of the blog, initially, we will write the required HTML then followed by CSS.

HTML for the toggle switch


<!DOCTYPE html>
<html lang="en">
      <title>Toggle switch pure CSS</title>
    <link rel="stylesheet" href="./style.css" />
    <form class="form-container" action="">
      <div class="switch">
        <div class="switch_box box_1">
          <input type="checkbox" class="switch" />
          <span class="on">OFF</span>
          <span class="off">ON</span>

Let us have a look at our switch and how it could be without CSS. here is the screenshot for your reference.

results with out css

It is just a checkbox with on and off text. So guys, let’s get into the CSS to see the miracle.

CSS for the toggle switch


.switch {
  display: inline-flex;
  align-items: center;
.switch_box {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px 0 25px;
input[type="checkbox"].switch {
  font-size: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 3.5em;
  height: 1.5em;
  background: #ddd;
  border-radius: 3em;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border: 1px solid rgb(3 115 9);
.form-container {
  max-width: 45%;
  margin: 50px auto;
  text-align: center;
  background: skyblue;
  padding: 7% 0;
  color: white;
.off {
  display: none;
.on {
  position: relative;
  left: -50px;
  color: rgb(3 115 9);
  font-weight: bolder;
  font-size: 17px;
input[type="checkbox"].switch:checked {
  background: rgb(4, 172, 13, 0.6);
  border: none;
input[type="checkbox"].switch:checked ~ .on {
  display: none;
input[type="checkbox"].switch:checked ~ .off {
  display: inline;
  position: relative;
  left: -88px;
  color: #fff;
  font-weight: bolder;
  font-size: 17px;
input[type="checkbox"].switch:after {
  position: absolute;
  content: "";
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

input[type="checkbox"].switch:checked:after {
  left: calc(100% - 1.5em);

Just go to your style.css file and add the above code. Do you want to be surprised by the result? Have a look at the below screenshot.
toggle switch

Final results

Here are the functionality results. This is just a simple and plain toggle switch. If you want to get more toggle switches with different effects you can look here (blog - as many examples for toggles switches)

final results


We have done an amazing job, with simple CSS we have created the functional toggle switch. Hope you guys received the required information about your requirement. Let us know if we missed anything, in the comment section will get back to you soon.



Read Next