The following example demonstrates creating a simple toggle switch using plain html and css.
These are really just plain checkboxes under the hood yet designating in a manner closer to a real life by css and HTML. A Toggle Switch Button control is a custom HTML5 input-type checkbox control that allows you to perform a toggle (on/off) action between checked and unchecked states.
It supports different sizes, labels, label positions, and UI customization.
Here is the html code:
<div class="switch-btn text-center ">
<label class="switch">
<input type="checkbox" id="togBtn" name="switchbtn">
<div class="slider-btn round">
<span>Basic</span><span>Premium</span>
</div>
</label>
</div>
Following the CSS code:
.switch {
position: relative;
display: inline-block;
width: 200px;
height: 45px;
text-align: left;
}
.switch input {display:none;}
.slider-btn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca222200;
-webkit-transition: .4s;
transition: .4s;
border-radius: 2rem;
border: 1px solid #727272;
}
.slider-btn:before {
position: absolute;
content: "";
height: 44px;
width: 55%;
left: 0px;
bottom: -1px;
background-color: #ff5a01;
-webkit-transition: .4s;
transition: .4s;
border-radius: 2rem;
}
input:checked + .slider-btn {
background-color: #2ab93400;
}
input:focus + .slider-btn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider-btn:before {
-webkit-transform: translateX(91px);
-ms-transform: translateX(91px);
transform: translateX(91px);
}
.slider-btn span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slider-btn span:last-child {
right: 12px;
}
.slider-btn span:first-child {
left: 16px;
}
