<div class="btn-action" id="btn03"> <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; } .btn-action::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 40px; height: 4px; border-radius: 4px; background-color: #00a5a0; } .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; } #btn03::before { -webkit-animation: btn03-bar01 0.75s forwards; animation: btn03-bar01 0.75s forwards; } @-webkit-keyframes btn03-bar01 { 0% { top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); } 50% { top: 50%; -webkit-transform: translateY(-50%) rotate(0); } 100% { -webkit-transform: translateY(0) rotate(0); } } @keyframes btn03-bar01 { 0% { top: 50%; transform: translateY(-50%) rotate(45deg); } 50% { top: 50%; transform: translateY(-50%) rotate(0); } 100% { transform: translateY(0) rotate(0); } } #btn03::after { -webkit-animation: btn03-bar03 0.75s forwards; animation: btn03-bar03 0.75s forwards; } @-webkit-keyframes btn03-bar03 { 0% { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); } 50% { bottom: 50%; -webkit-transform: translateY(50%) rotate(0); } 100% { -webkit-transform: translateY(0) rotate(0); } } @keyframes btn03-bar03 { 0% { bottom: 50%; transform: translateY(50%) rotate(-45deg); } 50% { bottom: 50%; transform: translateY(50%) rotate(0); } 100% { transform: translateY(0) rotate(0); } } #btn03.active::before { -webkit-animation: active-btn03-bar01 0.75s forwards; animation: active-btn03-bar01 0.75s forwards; } @-webkit-keyframes active-btn03-bar01 { 0% { -webkit-transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-50%) rotate(0); top: 50%; } 100% { -webkit-transform: translateY(-50%) rotate(45deg); top: 50%; } } @keyframes active-btn03-bar01 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-50%) rotate(0); top: 50%; } 100% { transform: translateY(-50%) rotate(45deg); top: 50%; } } #btn03.active::after { -webkit-animation: active-btn03-bar03 0.75s forwards; animation: active-btn03-bar03 0.75s forwards; } @-webkit-keyframes active-btn03-bar03 { 0% { -webkit-transform: translateY(0) rotate(0); } 50% { bottom: 50%; -webkit-transform: translateY(50%) rotate(0); } 100% { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); } } @keyframes active-btn03-bar03 { 0% { transform: translateY(0) rotate(0); } 50% { bottom: 50%; transform: translateY(50%) rotate(0); } 100% { bottom: 50%; transform: translateY(50%) rotate(-45deg); } } #btn03.active span { background-color: rgba(255, 255, 255, 0); }
$(function(){ $('.btn-action').on('click', function() { $(this).toggleClass('active'); return false; }); });