<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 class="toggle"> <span></span> </div>

body { margin:0; padding:0; background:#673ab7; transition:2s; } body.active { background:#ff0052; } .toggle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; background:#fff; cursor:pointer; border-radius:4px; box-shadow:0 2px 5px rgba(0,0,0,.5); overflow:hidden; } .toggle span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(0deg); width:calc(100% - 14px); height:3px; background:#262626; box-shadow: 0 -12px 0 #262626,0 12px 0 #262626; transition-property:transform, box-shadow; transition-delay:0s,1s; transition-duration:0.5s,0.5s; } .toggle.active span { box-shadow: 50px -12px 0 #262626,-50px 12px 0 #262626; transform:translate(-50%,-50%) rotate(-315deg); transition-property:box-shadow, transform; transition-delay:0s,0.5s; transition-duration:0.5s,0.5s; } .toggle span:before { content:''; position:absolute; top:-50px; left:50%; transform:translate(-50%,-50%); width:3px; height:36px; background:#262626; transition:0.5s; transition-delay:0.5s; } .toggle.active span:before { top:50%; transition-delay:1s; }

$(document).ready(function(){ $('.toggle').click(function(){ $('.toggle').toggleClass('active'); $('body').toggleClass('active'); }); });