<!-- Volume icon -->
<a href="" class="volume">
    <span>Volume up</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <g fill="#fff">
            <path
                d="M64.6,30c-1.4-1.4-3.6-1.4-5.1,0c-1.4,1.4-1.4,3.6,0,5.1c4,4,6.2,9.2,6.2,14.8s-2.2,10.9-6.2,14.8c-1.4,1.4-1.4,3.6,0,5.1  c0.7,0.7,1.6,1.1,2.5,1.1c0.9,0,1.8-0.4,2.5-1.1c5.4-5.4,8.3-12.5,8.3-20.1S69.8,35.4,64.6,30z" />
            <path
                d="M73.4,21.1c-1.4-1.4-3.6-1.4-5.1,0c-1.4,1.4-1.4,3.6,0,5.1c6.2,6.3,9.6,14.8,9.6,23.9S74.5,67.5,68.4,74  c-1.4,1.4-1.3,3.8,0,5.1c0.7,0.7,1.6,1.1,2.5,1.1s1.8-0.4,2.5-1.1C81,71.3,85,61,85,50.1S81,28.9,73.4,21.1z" />
            <path
                d="M82.5,12.3c-1.4-1.4-3.6-1.4-5.1-0.2c-1.4,1.3-1.4,3.6-0.2,5.1c8.5,8.9,13,20.4,13,32.8s-4.7,24.1-13,32.8  c-1.4,1.4-1.3,3.8,0.2,5.1c0.7,0.7,1.6,1.1,2.5,1.1s2-0.4,2.5-1.1c9.8-10.1,15-23.7,15-37.8S92.1,22.4,82.5,12.3z" />

            <polygon points="2.5,33.3 2.5,66.9 23.7,66.9 47.4,86.3 47.4,13.9 23.7,33.3 " />
        </g>
    </svg>
</a>



<!-- Social network links -->
<a class="twitter" target="_blank" href="https://twitter.com/jhan_code">
    <svg width="32" height="32" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
        <path
            d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z" />
    </svg>
</a>
<a class="instagram" target="_blank" href="https://www.instagram.com/jhanvasquez_/">
    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
        <path
            d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm138 0q0 164-115 279t-279 115-279-115-115-279 115-279 279-115 279 115 115 279zm108-410q0 38-27 65t-65 27-65-27-27-65 27-65 65-27 65 27 27 65zm-502-220q-7 0-76.5-.5t-105.5 0-96.5 3-103 10-71.5 18.5q-50 20-88 58t-58 88q-11 29-18.5 71.5t-10 103-3 96.5 0 105.5.5 76.5-.5 76.5 0 105.5 3 96.5 10 103 18.5 71.5q20 50 58 88t88 58q29 11 71.5 18.5t103 10 96.5 3 105.5 0 76.5-.5 76.5.5 105.5 0 96.5-3 103-10 71.5-18.5q50-20 88-58t58-88q11-29 18.5-71.5t10-103 3-96.5 0-105.5-.5-76.5.5-76.5 0-105.5-3-96.5-10-103-18.5-71.5q-20-50-58-88t-88-58q-29-11-71.5-18.5t-103-10-96.5-3-105.5 0-76.5.5zm768 630q0 229-5 317-10 208-124 322t-322 124q-88 5-317 5t-317-5q-208-10-322-124t-124-322q-5-88-5-317t5-317q10-208 124-322t322-124q88-5 317-5t317 5q208 10 322 124t124 322q5 88 5 317z" />
    </svg>
</a>

.volume {
    background: #23252a;
    color: #fff;
    text-decoration: none;
    display: flex;
    position: relative;
    padding: 10px 20px;
    border-radius: 7px;
    align-items: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        background: linear-gradient(121deg, rgba(230, 105, 97, 1) 0%, rgba(210, 70, 61, 1) 100%);
        opacity: 0;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        transition: all .3s;
    }

    &:hover {
        &::before {
            opacity: 1;
        }
    }

    span {
        font-size: 14px;
        position: relative;
    }

    svg {
        position: relative;
        width: 25px;
        margin-left: 15px;
    }

    path {
        opacity: 0;
        transform: translateX(-5px) scale(0.6);
        transform-origin: left;
        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    }
}

.level-1 path:first-child,
.level-2 path:first-child,
.level-2 path:nth-child(2),
.level-3 path {
    opacity: 1;
    transform: none;
}


//style body
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Inter', Arial;
    background-color: #191c20;

    .twitter {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 14px;

        svg {
            width: 30px;
            height: 30px;
            fill: #1da1f2;
        }
    }

    .instagram {
        position: fixed;
        display: block;
        right: 70px;
        bottom: 14px;

        svg {
            width: 30px;
            height: 30px;
            fill: #fff;
        }
    }
}

var sum = 1;
$('.volume').click(function (event) {
    event.preventDefault()
    $('g').addClass('level-' + sum);
    sum++;
    if (sum == 5) {
        $('g').removeClass();
        sum = 1;
    }
});