Switcharys (HTML Toggle Switch Button) are part of the modern UX and are getting more and more popular every day. Create your own 1 kb switches by using these 3 steps fast.
The HTML
<label class="switch" for="switch">
<input type="checkbox" id="switch">
<div class="slider"> </div>
</label>
The switches are technically form input fields in the form of checkboxes. To manipulate the look and feel of the checkbox we have to use input type checkbox with rounded borders and create a circle that floats on top. The key is to define two states of css and then create a transition on a click event. We have animated the button in direct css and used jQuery to define the state using class. You can also create data variables and other attributes to post if needed. But I like to keep it as clean as possible.
On click we need to change class from switch on to switch off and create a css transition in between.
The CSS
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 33px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
transition: all .4s ease 0s;
border-radius: 34px;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 5px;
bottom: 4px;
background-color: #fff;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
transition: all .4s ease 0s;
border-radius: 90%;
-moz-border-radius: 90%;
-webkit-border-radius: 90%;
}
.on .slider {
background-color: #2196F3;
}
.on .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
The jQuery
First you need to import the jQuery library form google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
Then check if checkbox is checked change the class "on" OR "off" in jQuery
<script type="text/javascript">
$('.switch').click(function() {
var thisVal = $(this).children('input[type="checkbox"]');
if(thisVal.is(':checked')) {
$(this).removeClass('off');
$(this).addClass('on');
}else{
$(this).addClass('off');
$(this).removeClass('on');
}
});
</script>
note : you need to have the Jquery library installed to ensure this works simply add it from the CDN below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
The Final Code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 33px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
transition: all .4s ease 0s;
border-radius: 34px;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 5px;
bottom: 4px;
background-color: #fff;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
transition: all .4s ease 0s;
border-radius: 90%;
-moz-border-radius: 90%;
-webkit-border-radius: 90%;
}
.on .slider {
background-color: #2196F3;
}
.on .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<label class="switch" for="switch">
<input type="checkbox" id="switch">
<div class="slider"> </div>
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script type="text/javascript">
$('.switch').click(function() {
var thisVal = $(this).children('input[type="checkbox"]');
if(thisVal.is(':checked')) {
$(this).removeClass('off');
$(this).addClass('on');
}else{
$(this).addClass('off');
$(this).removeClass('on');
}
});
</script>
</body>
</html>
Result
The working demo along with some fun variations can be seen below.
Default Demo:
iPhone Classic Demo:
Arrow Demo:
