How to create a toggle switch with CSS
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 represent the toggle switch.
<body><span>Toggle Switch </span><input type="checkbox" id="toggle" /><label for="toggle"></label></body>
The HTML structure consists of:
An
<input>element of typecheckboxwith anidattribute set totoggle. This checkbox will be hidden and used to control the state of the toggle switch.The
<label>element with theforattribute set totoggleis associated with the checkbox, and it will serve as the visual representation of the toggle switch.A
spanelement to help give description about the switch.
CSS styling
Now, we will start styling to create the toggle switch:
Styling the checkbox
To create the toggle switch, we’ll start by hiding the checkbox element.
#toggle {display: none;}
By setting the display property of the checkbox to none, we hide the checkbox element itself.
Styling the label
Next, we’ll style the label element to resemble a switch.
label {display: inline-block;;width: 40px;height: 20px;background-color: #ccc;border-radius: 10px;position: relative;cursor: pointer;margin-left: 32px;}
The label element is styled to resemble a switch.
The
displayproperty is set toinline-blockto make the switch come in line with text inspantag.The
width,heightandbackground-colorproperties are set, to give it overall look of a toggle switch.The
border-radiusproperty is set to10pxto give slightly rounded corners.The
cursorproperty is set topointerto indicate that it can be interacted with.The
margin-leftproperty is set to get some space between span element and switch
Creating the inner part of the switch
Now, we’ll create the inner part of the switch using the ::before pseudo-element.
label::before {content: "";position: absolute;top: 2px;left: 2px;width: 16px;height: 16px;background-color: white;border-radius: 50%;transition: transform 0.3s;}
To create the inner part of the switch, we use the ::before pseudo-element of the label.
This pseudo-element is positioned
absoluteinside the label element with a2pxoffset from the top and left edges.We specify
width,height,background-color, andborder-radiusto make the inner part a circle.We apply a transition effect to the
transformproperty with a duration of0.3seconds. This transition will be used later to animate the movement of the inner part.
Styling the checked state
We want the background color of the label to change when the switch is checked.
#toggle:checked + label {background-color: #2196F3;}
By using the :checked pseudo-class, we select the label element that immediately follows a checked checkbox using the + selector.
When the checkbox is checked, this rule changes the background color of the label to a specified color.
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(20px);}
When the checkbox is checked, this rule selects the inner part of the switch, which is represented by the ::before pseudo-element. It applies a transformation to the transform property, specifically translating the element along the X-axis by 20 pixels.
This creates the effect of moving the inner part to the right and animates the toggle effect.
Run code
Place the code in appropriate files and open the HTML file in a web browser. Here's a sample example of a toggle switch designed with CSS:
