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.
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>
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%; }
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Hi
Perfect it helped me to use switches. The css is correct
regards