<div class="btn-action" id="btn04"> <span></span> </div>
.btn-action { position: relative; width: 40px; height: 40px; margin: 100px auto; cursor: pointer; } .btn-action::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 40px; height: 4px; border-radius: 4px; background-color: #00a5a0; transition: all ease-in-out 0.5s; transform-origin: 0 0; } .btn-action::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 40px; height: 4px; border-radius: 4px; background-color: #00a5a0; transition: all ease-in-out 0.5s; transform-origin: 0 100%; } .btn-action span{ display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 40px; height: 4px; border-radius: 4px; border-color: transparent; background-color: #00a5a0; transition: border-color ease-in-out 0.5s; } #btn04.active::before { width: 54px; left: 2px; transform: rotate(45deg); transform-origin: 0 0; } #btn04.active::after { width: 54px; left: 2px; transform: rotate(-45deg); transform-origin: 0 100%; } #btn04.active span{ left: -62%; width: 84px; height: 84px; border: 4px solid #00a5a0; border-radius: 50%; background-color: transparent; }
$(function(){ $('.btn-action').on('click', function() { $(this).toggleClass('active'); return false; }); });