.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:;

}

.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'})

            }

        })

    })