<div class="toggle">
   <div class="toggle-items">
      <div class="toggle-item"></div>
      <div class="toggle-item"></div>
      <div class="toggle-item"></div>
   </div>
   <div class="toggle-active"></div>
</div>
.toggle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   cursor: pointer;
}

.toggle .anim {
   width: 120px;
   height: 120px;
   z-index: -1;
   background: rgba(255, 255, 255, .2);
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   opacity: 1;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.toggle .toggle-items .toggle-item {
   position: relative;
   left: 0;
   float: left;
   width: 45px;
   height: 45px;
   background: #fff;
   margin: 0 7.5px;
   border-radius: 50%;
   transition: 400ms cubic-bezier(.55, 0, .1, 1);
   -webkit-transition: 400ms cubic-bezier(.55, 0, .1, 1);
   -ms-transition: 400ms cubic-bezier(.55, 0, .1, 1);
}

.toggle.active .toggle-items .toggle-item:first-child {
   left: 60px;
}

.toggle.active .toggle-items .toggle-item:last-child {
   left: -60px;
}

.toggle .toggle-active {
   width: 160px;
   height: 160px;
   z-index: 2;
   background: rgba(255, 255, 255, 1);
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   opacity: 1;
   transform: translate(-50%, -50%) scale(0) rotate(270deg);
   -webkit-transform: translate(-50%, -50%) scale(0) rotate(270deg);
   -ms-transform: translate(-50%, -50%) scale(0) rotate(270deg);
   transition: 400ms cubic-bezier(.55, 0, .1, 1);
   -webkit-transition: 400ms cubic-bezier(.55, 0, .1, 1);
   -ms-transition: 400ms cubic-bezier(.55, 0, .1, 1);
}

.toggle .toggle-active:before,
.toggle .toggle-active:after {
   content: "";
   background: #3E57BA;
   z-index: 2;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.toggle.active .toggle-active:before,
.toggle.active .toggle-active:after {
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%) rotate(45deg);
   -ms-transform: translate(-50%, -50%);
}

.toggle .toggle-active:before {
   width: 60px;
   height: 7px;
}

.toggle .toggle-active:after {
   width: 7px;
   height: 60px;
}

.toggle.active .toggle-active {
   transform: translate(-50%, -50%) scale(1) rotate(90deg);
   -webkit-transform: translate(-50%, -50%) scale(1) rotate(90deg);
   -ms-transform: translate(-50%, -50%) scale(1) rotate(90deg);
}

body {
   background: #3E57BA;
}

*,
*:after,
*::before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   text-decoration: none;
   list-style-type: none;
   outline: none;
}
$(function() {

   $(".toggle").click(function() {

      $(this).prepend('<span class="anim"></span>')
      $(".anim").animate({
            width: 360,
            height: 360,
            opacity: 0
         },
         300,
         function() {
            $(this).remove();
         });

      $(this).toggleClass('active');

   })

})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js