.circular1{
width: 50px;
height: 30px;
border-radius: 16px;
background-color: #ccc;
transition: .3s;
cursor: pointer;
}
.round-button1{
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
transition: .3s;
position: relative;
left: 0;
}
.round-button1:hover{
transform: scale(1.2);
box-shadow: 0 1px 8px rgba(0,0,0,.5);
}
<div class="circular1">
<div class="round-button1"></div>
</div>
$(function () {
$('.circular1').click(function () {
var left = $('.round-button1').css('left');
left = parseInt(left);
if (left == 0) {
$('.round-button1').css({'left': '22px', 'background-color': '#F00'});
$(this).css({'background-color': '#e7e7e7', 'box-shadow': '0 0 5px #999 inset'})
} else {
$('.round-button1').css({'left': '0', 'background-color': '#fff'})
}
})
})
