3本線のハンバーガーメニューを作る

2023-03-03

html

<p id="ham-btn"><span></span></p>

css

 #ham -btn{
width: 60px;
height: 60px;
background-color: #FFF ;
border-radius: 50%;
margin-left: auto;
position: relative;
span{
display: block;
width: 30px;
height: 3px;
background-color: $color_txt;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 3px;
transition: 0.1s;
&::before{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: $color_txt;
position: absolute;
top: -16px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 3px;
transition: 0.2s;
}
&::after{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: $color_txt;
position: absolute;
top: 0;
right: 0;
bottom: -16px;
left: 0;
margin: auto;
border-radius: 3px;
transition: 0.2s;
}
}
} #ham -btn.is-active>span{
background-color: transparent;
&::before{
top: 0;
transform: rotate(45deg);
}
&::after{
bottom: 0;
transform: rotate(135deg);
}
}

jquery

$(function(){
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
});
});

hoverしたらボタンがグラデーション
https://codepen.io/yachin29/pen/yLjKKgw
ホバーアニメーション付きのボタン
https://codepen.io/yachin29/pen/YzLzGmb