How to Create a Toggle Switch using CSS

Demo

This tutorial will show you how to create a toggle switch button with CSS. In your project where you’ve placed checkbox for the filtering purpose, replace the checkbox with a toggle switch. The toggle switch will add a neat and clean user experience to checkbox functionality. The toggle switch can be created using pure CSS, so you can use toggle switch as a filtering button in your web project. If you want to provide a better user experience on the web project, then display a toggle switch instead of a checkbox.

Here we’ll provide the short CSS code snippets for normal and rounded toggle switch. Use a normal style or round style toggle switch based on your web page layout.

HTML

Add the following HTML where you want to display a toggle switch checkbox.

<label class="switchBtn">     <input type="checkbox">     <div class="slide">Filter On</div> </label> 

Rounded Style Toggle Switch

<label class="switchBtn">     <input type="checkbox">     <div class="slide round">Filter On</div> </label> 

CSS

Add the following CSS to change checkbox to toggle switch button.

.switchBtn {     position: relative;     display: inline-block;     width: 110px;     height: 34px; } .switchBtn input {display:none;} .slide {     position: absolute;     cursor: pointer;     top: 0;     left: 0;     right: 0;     bottom: 0;     background-color: #ccc;     -webkit-transition: .4s;     transition: .4s;     padding: 8px;     color: #fff; } .slide:before {     position: absolute;     content: "";     height: 26px;     width: 26px;     left: 78px;     bottom: 4px;     background-color: white;     -webkit-transition: .4s;     transition: .4s; } input:checked + .slide {     background-color: #8CE196;     padding-left: 40px; } input:focus + .slide {     box-shadow: 0 0 1px #01aeed; } input:checked + .slide:before {     -webkit-transform: translateX(26px);     -ms-transform: translateX(26px);     transform: translateX(26px);     left: -20px; } 

Rounded Style Toggle Switch
Add the following CSS with the above CSS for making toggle button rounded.

.slide.round {     border-radius: 34px; } .slide.round:before {     border-radius: 50%; } 

Related Articles

Comments 0