以前つくったもの が不格好だったので再度挑戦してみました。
HTML
<div class="btn"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>
SCSS
body { background: #333; } .btn { box-sizing: border-box; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 21px; height: 19px; overflow: hidden; .line { position: absolute; left: 0; width: 21px; height: 3px; background: #fff; transition: transform .2s ease-in-out; &:nth-child(1) { top: 0; transform-origin: 0 3px; } &:nth-child(2) { top: 0; bottom: 0; right: 0; margin: auto; transform-origin: left center; } &:nth-child(3) { bottom: 0; transform-origin: 0 0; } } &.on { .line { &:nth-child(1) { transform: rotate(45deg); } &:nth-child(2) { transform: translateX(21px); } &:nth-child(3) { transform: rotate(-45deg); } } } }
DEMO
前回より若干良くなった気がします。