【コピペ可】ハンバーガーメニューのボタンアニメーション４選

コピペ可能なハンバーガーメニューのボタンアニメーションを４つほどご紹介します。それぞれデモとサンプルコードを用意しました。メニュー要素にjavascriptでisClosed クラスを付け替えることでアニメーションを実現しています。ハンバーガーメニューのボタンのアニメーションは「【コピペ可】ハンバーガーメニューの開閉アニメーション４選」に載せています。

事前準備

本サンプルでは、リセットCSSにdestyle.css（https://github.com/nicolas-cusan/destyle.css）を使っています。HTMLとCSSをコピペする前に、事前に以下のCDNでデフォルトのブラウザスタイルをリセットしてからお試しください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">

３本線からバツへ

３本線からバツマークへ切り替わるボタンアニメーションです。

See the Pen Untitled by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style01">
        <span class="MenuBtn-BarFrame">
                <span class="MenuBtn-BarFrame-FirstBar"></span>
                <span class="MenuBtn-BarFrame-SecondBar"></span>
                <span class="MenuBtn-BarFrame-ThirdBar"></span>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style01 {
    position: relative;

    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    border: solid 2px #000000;
}

.MenuBtn.Style01 .MenuBtn-BarFrame {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
}

.MenuBtn.Style01 .MenuBtn-BarFrame-FirstBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: all .15s linear;


}

.MenuBtn.Style01 .MenuBtn-BarFrame-SecondBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: all .15s linear;

    transform: translateY(-8px) rotate(0deg);
}

.MenuBtn.Style01 .MenuBtn-BarFrame-ThirdBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: all .15s linear;

    transform: translateY(8px) rotate(0deg);
}

.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-FirstBar {
    opacity: 0;
}

.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-SecondBar {
    transform: translateY(0) rotate(45deg);
}

.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-ThirdBar {
    transform: translateY(0) rotate(-45deg);
}

３本線がくるっと縦向きに９０度回転

３本線からくるっと９０度縦向きに回転するボタンアニメーションです。

See the Pen ボタンアニメーション１ by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style02">
        <span class="MenuBtn-BarFrame">
                <span class="MenuBtn-BarFrame-FirstBar"></span>
                <span class="MenuBtn-BarFrame-SecondBar"></span>
                <span class="MenuBtn-BarFrame-ThirdBar"></span>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style02 {
        position: relative;

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #eeeeee;
}

.MenuBtn.Style02 .MenuBtn-BarFrame {
        position: relative;
        display: block;
        width: 26px;
        height: 4px;
        transition: all .15s ease-in;
}

.MenuBtn.Style02 .MenuBtn-BarFrame-FirstBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;


}

.MenuBtn.Style02 .MenuBtn-BarFrame-SecondBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform: translateY(-9px) rotate(0deg);
}

.MenuBtn.Style02 .MenuBtn-BarFrame-ThirdBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform: translateY(9px) rotate(0deg);
}

.MenuBtn.Style02.isClosed .MenuBtn-BarFrame {
        transform: rotate(90deg);
}

３本線から矢印で戻るボタン

See the Pen ボタンアニメーション２ by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style03">
        <span class="MenuBtn-BarFrame">
                <span class="MenuBtn-BarFrame-FirstBar"></span>
                <span class="MenuBtn-BarFrame-SecondBar"></span>
                <span class="MenuBtn-BarFrame-ThirdBar"></span>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style03 {
        position: relative;

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #eeeeee;
}

.MenuBtn.Style03 .MenuBtn-BarFrame {
        position: relative;
        display: block;
        width: 26px;
        height: 4px;
        transition: all .15s ease-in;
}

.MenuBtn.Style03 .MenuBtn-BarFrame-FirstBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;


}

.MenuBtn.Style03 .MenuBtn-BarFrame-SecondBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform-origin: center left;
        transform: translateY(-9px) rotate(0deg);
}

.MenuBtn.Style03 .MenuBtn-BarFrame-ThirdBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform-origin: center left;
        transform: translateY(9px) rotate(0deg);
}

.MenuBtn.Style03.isClosed .MenuBtn-BarFrame-SecondBar {
        width: 16px;
        transform: translateY(1.414px) rotate(-45deg);
}

.MenuBtn.Style03.isClosed .MenuBtn-BarFrame-ThirdBar {
        width: 16px;
        transform: translateY(-1.414px) rotate(45deg);
}

メニューアイコンから別のアイコンへ切り替える

アイコンを閉じ開きで切り替えるアニメーションです。

See the Pen ボタンアニメーション４ by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style04">
        <span class="MenuBtn-BarFrame">
                <svg xmlns="http://www.w3.org/2000/svg" class="MenuBtn-BarFrame-OpenIcon" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="MenuBtn-BarFrame-CloseIcon" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style04 {
        position: relative;

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #eeeeee;
}

.MenuBtn.Style04 .MenuBtn-BarFrame {
        position: relative;
        display: block;
        width: 26px;
        height: 4px;
        transition: all .15s ease-in;
}

.MenuBtn.Style04 .MenuBtn-BarFrame-OpenIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 100%;
        opacity: 1;
        transition: all .15s linear;
}

.MenuBtn.Style04 .MenuBtn-BarFrame-CloseIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 100%;
        opacity: 0;
        transition: all .15s linear;
}

.MenuBtn.Style04.isClosed .MenuBtn-BarFrame-OpenIcon {
        opacity: 0;
}

.MenuBtn.Style04.isClosed .MenuBtn-BarFrame-CloseIcon {

        opacity: 1;
}