If you are into web development, learning how to create an HTML toggle switch is one of the most interesting things you can do. A toggle button helps you choose between two conditions, such as on or off. Toggle buttons are commonly used on mobile applications, websites, and forms where things such as dark mode, notifications, or privacy can be controlled.
In this blog, you will learn everything about a toggle switch, its uses, its working, and how you can create an HTML toggle button using HTML, CSS, and JavaScript. So let’s get started!
Table of Contents:
What is a Toggle Switch?
A toggle switch is a type of button that helps you switch between two states, usually ON and OFF. You can use the toggle button in web development, which helps you to make a choice between two options. It is used for features like turning on the dark mode or keeping it off, changing the language of the website, or enabling and disabling settings. A toggle button is very easy to use and provides a better user experience when you need to switch from one state to another on a website.
The image below shows an HTML toggle switch:
Master Web Development
Learn to Build Stunning Websites and Apps from Scratch
Pre-requisites
Before you start creating a toggle button, you need to have knowledge of the following things:
- You should have knowledge of basic HTML and how you can use simple tags like <div> and <button>.
- You should also have a basic understanding of CSS and how you can style different elements.
- You should know how to connect your HTML and CSS so that they work together.
- You should have knowledge of JavaScript to make the toggle button interactive, like switching it ON and OFF.
Now, we will provide you with a step-by-step process on how you can create a toggle button:
Step 1: Basic HTML Structure
The HTML structure is the foundation of every web page. It consists of meaningful tags such as <!DOCTYPE>, <html>, <head>, and<body>. These tags help you to define the page type, metadata, and visible content. Given below is a sample HTML code for creating a toggle button:
Code:
Output:
Explanation:
The above HTML code is used to create a webpage having a custom toggle. A CSS file is linked for styling this button, and a JavaScript file is linked to it to make the button work. This button uses a checkbox to show that the button is ON or OFF.
CSS styling of the toggle button transforms the button that initially looked like a normal checkbox into a modern switch. With the help of CSS, you can change its size, color, shape, and animations to provide easy transitioning
Code:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
background-color: #ccc;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
content: "";
position: absolute;
height: 26px;
width: 26px;
background-color: white;
left: 4px;
bottom: 4px;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #4CAF50;
}
input:checked + .slider:before {
transform: translateX(26px);
}
#toggleStatus {
margin-top: 20px;
font-size: 18px;
font-family: Arial, sans-serif;
}
Output:
Explanation:
The above CSS code is used to convert a regular checkbox into a stylish toggle button. It hides the default check box, gives the slider a rounded appearance, and places a white circle that moves on toggling. When it is turned ON, the background turns green, and the circle slides right.
Get 100% Hike!
Master Most in Demand Skills Now!
Step 3: Making it Work with JavaScript
In order to make a toggle button work, you can use JavaScript to detect when the button is switched ON and when it is switched OFF. It updates the text under the toggle button to display the present state.
Code:
Output:
Explanation:
The above JavaScript code checks if the toggle button is ON or OFF. When you click on it, the code updates the text below and shows “Toggle is ON” or “Toggle is OFF” based on the state of the button.
Best designs for Toggle Switches
Here, we will talk about some of the best designs for HTML toggle switches. They are given below, along with their respective codes:
1. Dark Mode Switch
Code:
The CSS code for this toggle design is given below:
Code:
:root {
--light: #d8dbe0;
--dark: #28292c;
--link: rgb(27, 129, 112);
--link-hover: rgb(24, 94, 82);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #cfafaf;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.toggle-switch {
position: relative;
width: 200px;
}
label {
position: absolute;
width: 100%;
height: 100px;
background-color: var(--dark);
border-radius: 50px;
cursor: pointer;
}
input {
position: absolute;
display: none;
}
.slider {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
transition: 0.3s;
}
input:checked ~ .slider {
background-color: var(--light);
}
.slider::before {
content: "";
position: absolute;
top: 13px;
left: 16px;
width: 75px;
height: 75px;
border-radius: 50%;
box-shadow: inset 28px -4px 0px 0px var(--light);
background-color: var(--dark);
transition: 0.3s;
}
input:checked ~ .slider::before {
transform: translateX(95px);
background-color: var(--dark);
box-shadow: none;
}
a {
position: relative;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
top: 150px;
left: 10px;
font-size: 10px;
text-decoration: none;
color: var(--link);
font-weight: bold;
text-align: center;
}
a:hover {
color: var(--link-hover);
}
Output:
Explanation:
The above code is used to create a custom toggle button. The HTML code uses a hidden checkbox inside a label, and the CSS adds styles, colors, and smooth animation. When you toggle the button, the switch slides, and the color changes, which shows the button is ON or OFF.
2. Pure CSS toggle switch
Code:
The CSS code for this toggle design is given below:
Code:
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 200px;
height: 100px;
background: grey;
display: block;
border-radius: 100px;
position: relative;
}
label::after {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 90px;
height: 90px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background: #bada55;
}
input:checked + label::after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active::after {
width: 130px;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Output:
Explanation:
The above code is used to create a rounded toggle button. It has a hidden checkbox and a styled label. When it is toggled, the background color changes, and a white circle slides to the right. This creates a smooth switch effect.
3. Toggle Switch with Rolling Label
Code:
The CSS code for this toggle design is given below:
Code:
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(48px + (60 - 48)*(100vw - 320px)/(1024 - 320));
}
body, input {
color: #fff;
font: 1em "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.5;
}
body {
background: #575757;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.toggle,
.toggle::before,
.slot__label,
.curtain {
transition-property: background-color, transform, visibility;
transition-duration: 0.25s;
transition-timing-function: ease-in, cubic-bezier(0.6, 0.2, 0.4, 1.5), linear;
}
.toggle::before,
.slot,
.slot__label {
display: block;
}
.toggle::before,
.curtain {
position: absolute;
}
.toggle:checked,
.curtain {
background-color: #2b7f3a;
}
.toggle:focus {
outline: transparent;
}
.toggle {
border-radius: 0.75em;
box-shadow: 0 0 0 0.1em inset;
cursor: pointer;
position: relative;
margin-right: 0.25em;
width: 3em;
height: 1.5em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.toggle::before {
background: currentColor;
border-radius: 50%;
content: "";
top: 0.2em;
left: 0.2em;
width: 1.1em;
height: 1.1em;
}
.toggle:checked::before {
transform: translateX(1.5em);
}
.toggle:checked ~ .slot .slot__label:nth-child(1) {
transform: translateY(-50%) scaleY(0);
}
.toggle:checked ~ .slot .slot__label:nth-child(2) {
transform: translateY(-100%) scaleY(1);
}
.toggle:checked ~ .curtain {
transform: scaleX(1);
}
.slot {
color: transparent;
font-size: 1.5em;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 1;
overflow: hidden;
height: 1em;
text-indent: -0.9em;
-webkit-text-stroke: 0.05em #fff;
}
.slot__label {
transform-origin: 50% 0;
}
.slot__label:nth-child(2) {
transform-origin: 50% 100%;
}
.curtain {
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
z-index: -1;
}
The JavaScript for this toggle button design is given below:
Code:
Output:
Explanation:
The above code is used to create a custom toggle button with smooth animations. The structure is defined using HTML, whereas the style of the button is defined using CSS. JavaScript is also used to update the aria-checked value.
Conclusion
It is easy to create a toggle button in HTML, and it is easy to switch between two states, like ON and OFF. With the help of HTML, CSS, and JavaScript, you can create your own custom toggle buttons that have smooth transitions and distinguishable labels. Such buttons enhance the user experience, and they are often placed in an environment such as the dark mode, notifications, or preferences. The toggle buttons can be used in any web project with ease after some practice on the style and functionality. If you want to learn more about HTML, go through our blog and also subscribe to our Web Development Course.
How to Create an HTML Toggle Switch – FAQs
Q1. Can toggle buttons be created using only JavaScript?
Sure, you can implement toggle buttons using JavaScript by manipulating the DOM elements and their style.
Q2. Are toggle buttons accessible for screen readers?
Yes, as long as it is labeled with aria- attributes, it can be made accessible.
Q3. Can toggle buttons be used in forms?
Yes, toggle buttons can be part of forms, and their values can be submitted like other inputs.
Q4. Is it possible to create a vertical toggle button?
Yes, by using CSS, it is possible to make a toggle look vertical by rotating it or redesigning it.
Q5. Can I add icons inside a toggle button?
Yes, it is possible to style it with CSS or inline SVGs with icons like a moon or a sun inside the toggle switch.