<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="filter-group" class="filter-group">
<ul class='list'>
<li class='list__item'>
<label for='info' class='switch switch--info'>
<input class='switch__input' type="checkbox" id='info' checked />
<div class="switch__box">
<span class="switch__box-inner"></span>
</div>
<p class="switch__desc">Web Coder Skull</p>
</label>
</li>
<li class='list__item'>
<label for='developer' class='switch switch--info'>
<input class='switch__input' type="checkbox" id='developer' />
<div class="switch__box">
<span class="switch__box-inner"></span>
</div>
<p class="switch__desc">Freelance Developer</p>
</label>
</li>
</ul>
</div>
.list {
list-style: none;
margin: 0;
padding: 20px 10px;
position: relative;
height:auto;
font-size: 10px;
}
.list__item {
padding: 4px 0px;
transition: .3s ease all;
}
.switch {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.switch__input {
opacity: 0;
visibility: hidden;
width: 1px;
height: 1px;
background-color: transparent;
pointer-events: none;
position: absolute;
}
.switch__box {
padding: 3px;
border-radius: 100px;
position: relative;
height: 16px;
width: 30px;
background-color: #bdbdbd;
box-shadow: 0 0 10px transparent;
transition: 0.4s all cubic-bezier(0.38, 0.24, 0.28, 1.17);
}
.switch__box-inner {
position: absolute;
width: 10px;
height: 10px;
border-radius: 100px;
background-color: white;
-webkit-transform: translateX(0);
transform: translateX(0);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
transition: 0.4s all cubic-bezier(0.38, 0.24, 0.28, 1.17);
overflow: hidden;
}
.switch__box-inner::after {
content: '';
height: 4px;
width: 4px;
border-radius: 10px;
top: 3px;
left: 3px;
position: absolute;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
}
.switch__input:checked ~ .switch__box > .switch__box-inner {
-webkit-animation: checkSwitch 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) forwards;
animation: checkSwitch 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) forwards;
}
.switch__input:checked ~ .switch__box > .switch__box-inner::after {
-webkit-animation: checkSwitchAfter 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) 0.2s forwards;
animation: checkSwitchAfter 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) 0.2s forwards;
}
.switch__input:not(:checked) ~ .switch__box > .switch__box-inner {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-animation: unCheckSwitch 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) forwards;
animation: unCheckSwitch 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) forwards;
}
.switch__input:not(:checked) ~ .switch__box > .switch__box-inner::after {
-webkit-animation: unCheckSwitchAfter 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) forwards;
animation: unCheckSwitchAfter 0.4s cubic-bezier(0.38, 0.24, 0.28, 1.17) forwards;
}
.switch--info .switch__box-inner::after {
background-color: rgba(39, 134, 251, 0.6);
}
.switch--info .switch__input:checked ~ .switch__box {
background-color: #2786fb;
box-shadow: 0 8px 12px rgba(39, 134, 251, 0.1);
}
.switch__desc {
margin-left: 14px;
margin-bottom:0;
font-size: 0.70rem;
}
@keyframes checkSwitch {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
width: 16px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
width: 10px;
-webkit-transform: translateX(14px);
transform: translateX(14px);
}
}
@keyframes checkSwitchAfter {
from {
-webkit-transform: translateX(-40px) scale(0.2);
transform: translateX(-40px) scale(0.2);
}
to {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
}
}
@keyframes unCheckSwitchAfter {
from {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
}
to {
-webkit-transform: translateX(40px) scale(0.2);
transform: translateX(40px) scale(0.2);
}
}
@keyframes unCheckSwitch {
0% {
width: 20px;
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
50% {
width: 16px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
