ハンバーガーメニューボタンのアイデア集

<button class="btn"><span></span></button>

/* ボタン本体 */
.btn{
    /* ボタンの横幅 */
    width: 66px;
    /* ボタンの高さ */
    height: 66px;
    /* ボタンタグに元々付いているボーダーを消す */
    border: none;
    /* ボタンの角丸(いらなければ省略可) */
    background-color: #f9f9f9;
    /* ボタンの角丸(いらなければ省略可) */
    border-radius: 10px;
    /* 中の線を親要素基準で位置指定したいので親要素の設定 */
    position: relative;
    /* マウスを乗せたときに指マークに変わるように */
    cursor: pointer;
}

/* 三本線の真ん中 */
.btn span{
    /* 親要素基準で位置決めする宣言 */
    position: absolute;
    /* 親要素の上からの位置(中央揃えになるように50％から線の太さの半分を引く) */
    top: calc(50% - 1.5px);
    /* 親要素の右からの位置 */
    right: 3px;
    /* サイズ指定するためにインライン→ブロック要素に変換 */
    display: block;
    /* 線の横幅 */
    width: 45px;
    /* 線の太さ */
    height: 3px;
    /* 線の色 */
    background-color: #555;
    /* 線の角丸 */
    border-radius: 1.5px;
    /* 何か変化があった場合0.5秒かけてアニメーションで滑らかに繋ぐ設定 */
    transition: all 0.5s;
}

/* 三本線の上と下 */
.btn span::before,
.btn span::after{
    /* 本来は文字等を入れるやつ、入れない場合も擬似要素作る時は必須 */
    content: "";
    /* サイズ指定するためにインライン→ブロック要素に変換 */
    display: block;
    /* 線の横幅 */
    width: 45px;
    /* 線の太さ */
    height: 3px;
    /* 線の色 */
    background-color: #555;
    /* 線の角丸 */
    border-radius: 1.5px;
    /* 親要素基準で位置決めする宣言(今回の親要素は三本線の真ん中) */
    position: absolute;
    /* 真ん中の線より20px上に配置 */
    top: -20px;
    /* 右寄せ */
    right: 0;
    /* 何か変化があった場合0.5秒かけてアニメーションで滑らかに繋ぐ設定 */
    transition: all 0.5s;

}

/* 三本線の下 */
.btn span::after{
    /* 線の横幅 */
    width: 30px;
    /* 真ん中の線より20px下に配置 */
    top: 20px;
}

/* ボタンがホバーされた時の三本線 */
.btn:hover span,
.btn:hover span::before,
.btn:hover span::after{
    /* 全て横幅は60pxに */
    width: 60px;
}

/* ボタンにクラス名onが追加された時の、三本線の真ん中 */
.btn.on span{
    /* 線の色透明に */
    background-color: transparent;
}

/* ボタンにクラス名onが追加された時の、三本線の上 */
.btn.on span::before{
    /* 線の横幅 */
    width: 60px;
    /* 真ん中の線と同じ位置に */
    top: 0;
    /* 30度回転 */
    transform: rotate(30deg);
}

/* ボタンにクラス名onが追加された時の、三本線の下 */
.btn.on span::after{
    /* 線の横幅 */
    width: 60px;
    /* 真ん中の線と同じ位置に */
    top: 0;
    /* -30度回転 */
    transform: rotate(-30deg);
}

//ボタンタグに名前つけ
let btn = document.querySelector(".btn");
// ボタンをクリックされた時
humbtn.addEventListener("click",function(){
    // もしボタンがクラスonを持ってたら
    if(btn.classList.contains("on")){
        // ボタンのクラスonを削除する
        btn.classList.remove("on")
    }
    // そうじゃなければ(ボタンがクラスonを持ってなかったら)
    else{
        // ボタンにクラスonを追加する
        btn.classList.add("on")
    }
});

<button class="btn" href="#"><span>MENU</span></button>

.btn{
    /* ボタンの横幅 */
    width: 66px;
    /* ボタンの高さ */
    height: 66px;
    /* ボタンに元々付いているボーダーを消す */
    border: none;
    /* ボタンの背景色(いらなければ省略可) */
    background-color: #f9f9f9;
    /* ボタンの角丸(いらなければ省略可) */
    border-radius: 10px;
    /* 中の要素を親要素で位置指定したいので親要素の設定 */
    position: relative;
    /* マウスを乗せた時に指マークに */
    cursor: pointer;
}

/* 文字 */
.btn span{
    /* 擬似要素を親要素基準で位置指定したいので親要素の設定 */
    position: relative;
    /* 変化があった時に0.1秒かけて滑らかにアニメーションするように */
    transition: all 0.1s;
    /* 文字サイズ */
    font-size: 13px;
    /* 行間 */
    line-height: 1;
}

/* ボタンにマウスを乗せた時の文字 */
.btn:hover span{
    /* 文字色透明 */
    color: #55555500;
}

/* マウスを乗せた時表示される文字”OPEN” */
.btn span::before{
    /* 表示される文字 */
    content: "OPEN";
    /* 親要素で位置指定する宣言 */
    position: absolute;
    /* 親要素(span)の上から50％ */
    top: 50%;
    /* 親要素(span)の左から50％ */
    left: 50%;
    /* 線の幅の50％分左に、線の太さの50％分上に戻す */
    transform: translate(-50%,-50%);
    /* 文字色透明(マウスが乗る前の状態) */
    color: #55555500;
    /* 変化があった時に0.1秒かけて滑らかにアニメーションするように */
    transition: all 0.1s;
}

/* マウスを乗せた時の”OPEN” */
.btn:hover span::before{
    /* 文字の色 */
    color: #555555;
}

/* 上の線、下の線 */
.btn::before,.btn::after{
    /* 本来は文字等を入れるやつ、入れない場合も擬似要素作る時は必須 */
    content: "";
    /* サイズ指定するためにインライン→ブロックに変更 */
    display: block;
    /* 線の横幅 */
    width: 50px;
    /* 線の太さ */
    height: 3px;
    /* 線の色 */
    background-color: #555;
    /* 線の角丸 */
    border-radius: 1.5px;
    /* 親要素基準で位置指定する宣言 */
    position: absolute;
    /* 上から25％の位置 */
    top: 25%;
    /* 左から50％の位置 */
    left: 50%;
    /* 線の幅の50％分左に、線の太さの50％分上に戻す */
    transform: translate(-50%,-50%);
    /* 変化があった時に0.1秒かけて滑らかにアニメーションするように */
    transition: all 0.5s;
}

/* 下の線 */
.btn::after{
    /* ↑で上の線と同じ位置に設定したのでリセット */
    top: auto;
    /* 下から25%の位置 */
    bottom: 25%;
    /* 線の幅の50％分左に、線の太さの50％分下に戻す */
    transform: translate(-50%,50%);
}

/* ボタンにクラス名onがついた時の文字"MENU" */
.btn.on span{
    /* 透明に */
    opacity: 0;
}

/* ボタンにクラス名onがついた時の上の線 */
.btn.on::before{
    /* 上から50%の位置 */
    top:50%;
    /* 回転して×になるように */
    transform: translate(-50%,-50%)rotate(135deg);
}

/* ボタンにクラス名onがついた時の下の線 */
.btn.on::after{
    /* 下から50％の位置 */
    bottom: 50%;
    /* 回転して×になるように */
    transform: translate(-50%,50%)rotate(-135deg);
}

//ボタンタグに名前つけ
let btn = document.querySelector(".btn");
// ボタンをクリックされた時
btn.addEventListener("click",function(){
    // もしボタンがクラスonを持ってたら
    if(btn.classList.contains("on")){
        // ボタンのクラスonを削除する
        btn.classList.remove("on")
    }
    // そうじゃなければ(ボタンがクラスonを持ってなかったら)
    else{
        // ボタンにクラスonを追加する
        btn.classList.add("on")
    }
});