<button class="button">
    <svg viewBox="0 0 132 48" preserveAspectRatio="none">
        <path d="M4,3 C24.6666667,3 45.3333333,3 66,3 C86.6666667,3 107.333333,3 128,3 C129.104569,3 130,3.8954305 130,5 C130,11.3333333 130,17.6666667 130,24 C130,30.3333333 130,36.6666667 130,43 C130,44.1045695 129.104569,45 128,45 C107.333333,45 86.6666667,45 66,45 C45.3333333,45 24.6666667,45 4,45 C2.8954305,45 2,44.1045695 2,43 C2,36.6666667 2,30.3333333 2,24 C2,17.6666667 2,11.3333333 2,5 C2,3.8954305 2.8954305,3 4,3 Z" />
    </svg>
    <span>Normal</span>
</button>

<button class="button border">
    <svg viewBox="0 0 132 48" preserveAspectRatio="none">
        <path d="M4,3 C24.6666667,3 45.3333333,3 66,3 C86.6666667,3 107.333333,3 128,3 C129.104569,3 130,3.8954305 130,5 C130,11.3333333 130,17.6666667 130,24 C130,30.3333333 130,36.6666667 130,43 C130,44.1045695 129.104569,45 128,45 C107.333333,45 86.6666667,45 66,45 C45.3333333,45 24.6666667,45 4,45 C2.8954305,45 2,44.1045695 2,43 C2,36.6666667 2,30.3333333 2,24 C2,17.6666667 2,11.3333333 2,5 C2,3.8954305 2.8954305,3 4,3 Z" />
    </svg>
    <span>Border</span>
</button>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

.button {
    --color: #F6F8FF;
    --background: #58607F;
    --background-hover: #535A79;
    display: flex;
    align-items: center;
    outline: none;
    cursor: pointer;
    position: relative;
    border: 0;
    padding: 8px 36px;
    line-height: 26px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    background: none;
    color: var(--color);
    -webkit-tap-highlight-color: transparent;
    svg {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 48px;
        transform: translateZ(0);
        stroke: var(--stroke, none);
        stroke-width: var(--stroke-width, 0);
        fill: var(--fill, var(--background));
        transition: fill .25s linear;
    }
    span {
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    &:hover {
        --fill: var(--background-hover);
    }
    &.border {
        --stroke: #D1D6EE;
        --stroke-width: 1px;
        --color: #404660;
        --background: #fff;
        --background-hover: #FAFBFF;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', Arial;
    background: #ECEFFC;
    .button {
        margin: 0 16px;
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}

gsap.registerPlugin(MorphSVGPlugin);

document.querySelectorAll('.button').forEach(button => {

    let path = button.querySelector('svg path')

    button.addEventListener('pointerdown', e => {
        gsap.to(path, {
            duration: .25,
            morphSVG: 'M4.61888061,3.16033114 C25.0792537,4.38677705 45.5396269,5 66,5 C86.4603676,5 106.920735,4.38677738 127.381103,3.16033213 L127.381102,3.16031915 C128.4837,3.09422671 129.43111,3.93448015 129.497203,5.03707774 C129.507043,5.20123476 129.496598,5.36597876 129.466107,5.52757892 C128.488702,10.707648 128,16.8651217 128,24 C128,31.1348854 128.488703,37.2923642 129.46611,42.4724366 L129.466097,42.4724389 C129.670899,43.5578488 128.957025,44.6037719 127.871615,44.8085734 C127.710017,44.8390647 127.545274,44.8495087 127.381119,44.8396689 C106.920746,43.613223 86.4603731,43 66,43 C45.5396324,43 25.0792647,43.6132226 4.61889712,44.8396679 L4.6188979,44.8396809 C3.51630032,44.9057733 2.56888986,44.0655198 2.50279742,42.9629223 C2.49295744,42.7987652 2.50340153,42.6340212 2.53389315,42.4724211 C3.51129772,37.292352 4,31.1348783 4,24 C4,16.8651146 3.51129674,10.7076358 2.53389023,5.52756343 L2.53390261,5.52756109 C2.32910108,4.44215115 3.04297524,3.3962281 4.12838519,3.19142657 C4.28998345,3.16093526 4.45472551,3.15049128 4.61888061,3.16033114 Z'
        });
    })

    button.addEventListener('pointerup', e => {
        gsap.to(path, {
            duration: 1,
            ease: 'elastic.out(1, 0.25)',
            morphSVG: 'M4,3 C24.6666667,3 45.3333333,3 66,3 C86.6666667,3 107.333333,3 128,3 C129.104569,3 130,3.8954305 130,5 C130,11.3333333 130,17.6666667 130,24 C130,30.3333333 130,36.6666667 130,43 C130,44.1045695 129.104569,45 128,45 C107.333333,45 86.6666667,45 66,45 C45.3333333,45 24.6666667,45 4,45 C2.8954305,45 2,44.1045695 2,43 C2,36.6666667 2,30.3333333 2,24 C2,17.6666667 2,11.3333333 2,5 C2,3.8954305 2.8954305,3 4,3 Z'
        });
    })

});