<div class="openbtn01">
<span></span>
<span></span>
<span></span>
</div>
@charset "utf-8";
.openbtn01{
position: relative;
background:#57a2c7;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 5px;
span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 22px;
&:nth-of-type(1){
top:15px;
}
&:nth-of-type(2){
top:23px;
}
&:nth-of-type(3){
top:31px;
}
}
&.active{
span{
&:nth-of-type(1){
top: 18px;
transform: translateY(6px) rotate(-45deg);
width: 22px;
}
&:nth-of-type(2){
opacity: 0;
}
&:nth-of-type(3){
top: 30px;
transform: translateY(-6px) rotate(45deg);
width: 22px;
}
}
}
}
/*========= レイアウトのためのCSS ===============*/
body{
background:#f3f3f3;
padding:20px;
}
View Compiled
const btn = document.getElementsByClassName('openbtn01')[0];
btn.addEventListener('click',function(){
this.classList.toggle('active');
})
This Pen doesn't use any external CSS resources.