ADVERTISEMENT

Create a Toggle Switch Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

Create a Toggle Switch Using HTML and CSS

Toggle Switch Using HTML and CSS
Toggle Switch Using HTML and CSS

 

ADVERTISEMENT

 

ADVERTISEMENT

Welcome to the codewithrandom blog. In this blog, we learn how to create Custom Toggle Switch. We use HTML and CSS  for this Toggle Switch.

I hope you enjoy our blog so let’s start with a basic Html Structure for Toggle Switch.

ADVERTISEMENT

HTML Code For Toggle Switch

<!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>custom toggle switch using css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggle">
<input type="checkbox" name="" id="">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

There is all the Html Code for Toggle Switch. Now you can see output without Css. then we write Css Code for the Styling toggle switch.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Html Code Output

Toggle Switch Using HTML and CSS
Toggle Switch Using HTML and CSS

CSS Code For Toggle Switch

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #171717;
}
.toggle{
width: 80px;
height: 40px;
background: #1b1b1b;
border-radius: 50px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.toggle input{
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
z-index: 10;
}
.left, .right{
position: absolute;
width: 50%;
height: 100%;
background: #2b2b2b;
border-radius: 50px;
border: 15px solid rgb(19, 19, 19);
transform: translateX(-2px);
/* box-shadow: 10px 0 25px #272727; */
transition: all .2s;
}
.toggle input:checked ~ .left{
transform: translateY(-100%);
}
.right{
right: 0;
transform: translateY(100%);
transform: translateX(100%);
background: #DA0037;
box-shadow: -10px 0 25px #da003770;
transition: all .2s;
}
.toggle input:checked ~ .right{
transform: translateY(0%);
}

Now we complete our Toggle Switch Project. Here is our updated output with HTML + CSS.

ADVERTISEMENT

Create a Music Player using HTML,CSS & JavaScript

Final Output Of Toggle Switch Using HTML and CSS


 

Toggle Switch Using HTML and CSS
Toggle Switch Using HTML and CSS

 

ADVERTISEMENT

Create a Spotify Clone Using HTML CSS & JavaScript

ADVERTISEMENT

In this post, we learn how to Create a Toggle Switch Using HTML and CSS. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.

project: by @coding_gyan_
written by – codewithrandom/Anki

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT