<div class="btn-action" id="btn02"> <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; background-color: #00a5a0; transition: all ease-in-out 0.5s; } #btn02.active::before, #btn02.active::after { width: 20px; } #btn02.active::before { -webkit-transform: translate(-1px, 20px) rotate(-45deg); transform: translate(-1px, 20px) rotate(-45deg); } #btn02.active::after { -webkit-transform: translate(-1px, -20px) rotate(45deg); transform: translate(-1px, -20px) rotate(45deg); }
$(function(){ $('.btn-action').on('click', function() { $(this).toggleClass('active'); return false; }); });