Create a Toggle Switch with HTML and CSS

Hello Everyone Welcome to Frontend Gyaan and Second Blog. Today I have made an Amazing On/Off Toggle Switch button with the help of HTML and CSS Only!

Follow @frontendgyaan on Instagram for web development content daily.

Before starting the blog, you might think about where you can use this project in real-life-based projects. So it’s an on/off toggle switch that you can use in your own blog project. Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states, such as on or off. If there are multiple options, it’s best to use something else.

Let’s start making these amazing On/Off Toggle Switch buttons Using HTML & CSS step by step.

How to Create on off Toggle Switch using HTML And CSS Only

1. HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
</body>
</html>

2. CSS

body{
background-color:#20222f;
color:white;}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Output – On/Off Toggle Switch

If you found any value in this blog you can support me by buying me a coffee.

If you found any value in this blog you can Follow Instagram Page @frontendgyaan

If you have any idea then you can contact us

Share your love

Leave a Reply