<div class="togswitch" position="on" style="background: rgba(244, 67, 54, 0.498039);">
<div class="togswitchnob" style="left: 20px; background: rgb(244, 67, 54);"></div>
<div class="togswitchnob_touch" style="left: 20px; background: rgba(244, 67, 54, 0.0980392);"></div>
</div>
.togswitch{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width: 40px;
height: 16px;
background: rgba(0,0,0,0.26);
border-radius: 8px;
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.togswitchnob {
width: 24px;
height: 24px;
background: #fafafa;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.28);
-webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.togswitchnob_touch {
width: 24px;
height: 24px;
background: rgba(0,0,0,0.05);
border-radius: 50%;
transform: scale(1,1);
-webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
left: -4px;
top: -4px;
z-index: 1;
opacity: 0;
}
.togswitch:active .togswitchnob_touch{
transform:scale(2.6,2.6);
opacity:1;
}
$( ".togswitch" ).each(function() {
var posi = $(this).attr('position');
if(posi == 'off'){
$(this).children('.togswitchnob').css({'left': '20px'});
$(this).css({'background': 'rgba(244,67,54,0.5)'});
$(this).children('.togswitchnob_touch').css({'background': 'rgba(244,67,54,0.1)'});
$(this).children('.togswitchnob').css({'background': '#f44336'});
$(this).children('.togswitchnob_touch').css({'left': '20px'});
$(this).attr('position','on');
}else if(posi == 'on'){
$(this).children('.togswitchnob').css({'left': '-4px'});
$(this).children('.togswitchnob_touch').css({'left': '-4px'});
$(this).css({'background': 'rgba(0,0,0,0.26)'});
$(this).children('.togswitchnob').css({'background': '#FAFAFA'});
$(this).children('.togswitchnob_touch').css({'background': 'rgba(0,0,0,0.05)'});
$(this).attr('position','off');
}
});
$('body').on('click','.togswitch',function(){
var posi = $(this).attr('position');
if(posi == 'off'){
$(this).children('.togswitchnob').css({'left': '20px'});
$(this).css({'background': 'rgba(244,67,54,0.5)'});
$(this).children('.togswitchnob_touch').css({'background': 'rgba(244,67,54,0.1)'});
$(this).children('.togswitchnob').css({'background': '#f44336'});
$(this).children('.togswitchnob_touch').css({'left': '20px'});
$(this).attr('position','on');
}else if(posi == 'on'){
$(this).children('.togswitchnob').css({'left': '-4px'});
$(this).children('.togswitchnob_touch').css({'left': '-4px'});
$(this).css({'background': 'rgba(0,0,0,0.26)'});
$(this).children('.togswitchnob').css({'background': '#FAFAFA'});
$(this).children('.togswitchnob_touch').css({'background': 'rgba(0,0,0,0.05)'});
$(this).attr('position','off');
}
});
See the Pen CSS Material design switch by Karna (@kknmalone) on CodePen.