/////////////////////////css
/////////////////////////html
/////////////////Result
.switch-btn
{
position: relative;
display: inline-block;
margin-left: 50px;
width: 88px;
height: 20px;
}
.switch-btn .switch input
{
display: none;
}
.switch-btn .slider
{
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.switch-btn .slider:before
{
position: absolute;
content: "";
height: 28px;
width: 28px;
left: 1px;
bottom: -4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border: solid 0.5px #ddd;
}
.switch-btn input:checked + .slider
{
background-color: #2ab934;
}
.switch-btn input:focus + .slider
{
box-shadow: 0 0 1px #2196F3;
}
.switch-btn input:checked + .slider:before
{
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.switch-btn .on, .off
{
color: #000;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 0.9rem;
font-family: Verdana, sans-serif;
}
.switch-btn .on
{
/*display: none;*/
color:#ddd;
left: -1.2rem;
}
.switch-btn .off
{
left: 6rem;
width: 1px;
color:#000;
}
.switch-btn input:checked + .slider .on
{
/* display: block;*/
color:#000;
}
.switch-btn input:checked + .slider .off
{
color:#ddd;
/* display: none;*/
}
/*--------- END --------*/
/* Rounded sliders */
.switch-btn .slider.round
{
border-radius: 34px;
}
.switch-btn .slider.round:before
{
border-radius: 50%;
}
/////////////////////////html
<label class="switch-btn ">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span class="on">On</span> <span class="off">Off</span>
</div>
</label>
/////////////////Result
No comments:
Post a Comment