Hello Coders, In this article we are going to learn how to create Toggle Switch On Off button using HTML and CSS
What is Neomorphism?
It is a new design trend in the field of web development which got famous in a very short amount of time. You can say that neomorphism actually takes our user interfaces to the next level.
In this article we are going to be building a On Off switch button which follows our neomorphism design Trend. I have provided the necessary video tutorial and complete source code in this article.
Toggle Neomorphism Switch Button in HTML and CSS | Video Tutorial
In the video above, I have shown how to build it step by step. If you are a complete beginner to HTML and CSS, Consider watching the tutorial.
Neomorphism On Off Switch Button in HTML and CSS | Source Code
Here I have given all the HTML and CSS Code for you to follow along to build this project and also you can download the complete source code of this project by clicking on the download button at the bottom of this article.
How do I create On Off Switch button in HTML | HTML Free Source Code
Create index.html file. Inside the html file, add the necessary boiler plate of an html document like html, head, title, body tags. Below is the html code.
HTML Code : Inside the body tag, add the following html code and follow along with the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neumorphism Toggle On/Off</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<label class="switch">
<input type="checkbox" />
<div class="slider slider--0">ON</div>
<div class="slider slider--1">
<div></div>
<div></div>
</div>
<div class="slider slider--2"></div>
<div class="slider slider--3">OFF</div>
</label>
</body>
</html>
How do I design On Off Switch button in CSS | CSS Free Source Code
Create styles.css file. Also dont forget to link the css file to out html document. Below is CSS Code.
CSS Code : Now its time to style. I have provided the css code below which you can start typing from top to bottom and observe the changes it makes.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #e8e8e8;
}
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border: 2px solid #dcdcdc;
background: #e0e0e0;
box-shadow: 7px 7px 23px #bebebe, -7px -7px 23px #ffffff;
overflow: hidden;
border-radius: 60px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
color: #9a9a9a;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-family: sans-serif;
}
input:checked + .slider:before {
background: white;
box-shadow: none;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
.slider--0 {
color: white;
font-weight: 600;
background-color: #49d84e;
}
.slider--1 div {
transition: 0.5s;
position: absolute;
width: 100%;
height: 50%;
left: 0;
}
input:checked ~ .slider--1 div:first-child {
transform: translateY(-100%);
transition-delay: 1s;
}
input:checked ~ .slider--1 div:last-child {
transform: translateY(100%);
transition-delay: 1s;
}
input:checked ~ .slider--2 {
transform: translateX(100%);
transition-delay: 0.5s;
}
input:checked ~ .slider--3 {
transform: translateX(-100%);
transition-delay: 0s;
}
.slider--1 div:first-child {
transform: translateY(0);
top: 0;
background-color: #f3f3f3;
transition-delay: 0s;
}
.slider--1 div:last-child {
transform: translateY(0);
bottom: 0;
background-color: #f3f3f3;
border-top: 1px solid #e0e0e0;
transition-delay: 0s;
}
.slider--2 {
background-color: #e6e6e6;
transition-delay: 0.5s;
transform: translateX(0);
border-left: 1px solid #d2d2d2;
}
.slider--3 {
background-color: #d2d2d2;
transition-delay: 1s;
transform: translatex(0);
border-right: 1px solid #d2d2d2;
}
This is what you will get once done creating Toggle Switch Button with HTML and CSS.
Thank you for reading this article.
Credits: Orhan Eroglu
Click on download button to directly download source code of Toggle On Off Switch Button.
