<button class="button">
    <svg preserveAspectRatio="none" viewBox="0 0 200 68">
        <path d="M0 12C0 12 60 12 100 12C140 12 200 12 200 12V56C200 56 140 56 100 56C60 56 0 56 0 56V12Z" />
    </svg>
    <div>Button</div>
</button>

<button class="button white">
    <svg preserveAspectRatio="none" viewBox="0 0 200 68">
        <path d="M0 12C0 12 60 12 100 12C140 12 200 12 200 12V56C200 56 140 56 100 56C60 56 0 56 0 56V12Z" />
    </svg>
    <div>Button</div>
</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 {
    --background: #275EFE;
    --background-hover: #1D4FE1;
    --shadow: #{rgba(#275EFE, .3)};
    --shadow-hover: #{rgba(#275EFE, .5)};
    --text: #fff;
    display: flex;
    align-items: center;
    outline: none;
    cursor: pointer;
    position: relative;
    border: 0;
    padding: 0;
    height: 44px;
    line-height: 20px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    background: none;
    color: var(--text);
    filter: drop-shadow(0 2px 5px var(--s, var(--shadow)));
    -webkit-tap-highlight-color: transparent;
    transition: filter .4s;
    &:before,
    &:after {
        content: '';
        display: block;
        width: 12px;
        height: 44px;
        background: var(--b, var(--background));
        transform: scaleX(1.04) scaleY(var(--scale-y, 1));
        transition: background .4s;
    }
    &:before {
        transform-origin: 0 50%;
        border-radius: 10px 0 0 10px;
    }
    &:after {
        transform-origin: 100% 50%;
        border-radius: 0 10px 10px 0;
    }
    svg {
        width: calc(100% - 24px);
        height: 68px;
        display: block;
        position: absolute;
        pointer-events: none;
        left: 12px;
        right: 12px;
        top: -12px;
        fill: var(--b, var(--background));
        transition: fill .4s;
    }
    div {
        z-index: 1;
        position: relative;
        display: flex;
        padding: 0 16px;
        span {
            display: block;
            backface-visibility: hidden;
            transform: translateZ(0);
            animation: var(--name, none) .75s linear forwards;
        }
    }
    &.in {
        --name: move;
        &:not(.out) {
            --c: var(--color-hover);
            --b: var(--background-hover);
            --s: var(--shadow-hover);
        }
        &.out {
            --name: move-out;
        }
    }
    &.white {
        --border: #D1D6EE;
        --background: #fff;
        --background-hover: #fff;
        --text: #2B3044;
        --scale-y: 1.025;
        --shadow: #{rgba(#041268, .08)};
        --shadow-hover: #{rgba(#041268, .16)};
        &:before {
            border: 1px solid var(--border);
            border-right: 0;
        }
        &:after {
            border: 1px solid var(--border);
            border-left: 0;
        }
        svg {
            stroke-width: 1px;
            stroke: var(--border);
            stroke-dasharray: 200 44;
        }
    }
}

@keyframes move {
    22%,
    36% {
        transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
    }
    50% {
        transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
    }
    70% {
        transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
    }
}

@keyframes move-out {
    22%,
    36% {
        transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
    }
    50% {
        transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
    }
    70% {
        transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
    }
}

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;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background: #F6F8FF;
    .button {
        margin: 0 12px;
    }
    .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;
        }
    }
}
View Compiled 
gsap.registerPlugin(MorphSVGPlugin);

document.querySelectorAll('.button').forEach(button => {
    let div = button.querySelector('div'),
        path = button.querySelector('svg path'),
        letters = button.textContent.trim().split(''),
        dest = 2;

    div.innerHTML = '';

    function elements(letter, index, array) {

        let element = document.createElement('span'),
            part = (index >= array.length / 2) ? -1 : 1,
            position = (index >= array.length / 2) ? array.length / 2 - index + (array.length / 2 - 1) : index,
            move = position / (array.length / 2),
            rotate = 1 - move;

        element.innerHTML = !letter.trim() ? '&nbsp;' : letter;
        element.style.setProperty('--move', move);
        element.style.setProperty('--rotate', rotate);
        element.style.setProperty('--part', part);

        div.appendChild(element);

    }

    letters.forEach(elements);

    button.addEventListener('mouseenter', e => {
        if(!button.classList.contains('out')) {
            button.classList.add('in');
            gsap.to(path, {
                keyframes: [{
                    morphSVG: 'M0 12C0 12 60 ' + 8 + ' 100 ' + 8 + 'C140 ' + 8 + ' 200 12 200 12V56C200 56 140 ' + 52 + ' 100 ' + 52 + 'C60 ' + 52 + ' 0 56 0 56V12Z',
                    ease: 'power1.out',
                    duration: .265
                }, {
                    morphSVG: 'M0 12C0 12 60 ' + 12 + ' 100 ' + 12 + 'C140 ' + 12 + ' 200 12 200 12V56C200 56 140 ' + 56 + ' 100 ' + 56 + 'C60 ' + 56 + ' 0 56 0 56V12Z',
                    ease: 'elastic.out(1, .5)',
                    duration: .715
                }]
            });
        }
    });

    button.addEventListener('mouseleave', e => {
        if(button.classList.contains('in')) {
            button.classList.add('out');
            gsap.to(path, {
                keyframes: [{
                    morphSVG: 'M0 12C0 12 60 ' + 16 + ' 100 ' + 16 + 'C140 ' + 16 + ' 200 12 200 12V56C200 56 140 ' + 60 + ' 100 ' + 60 + 'C60 ' + 60 + ' 0 56 0 56V12Z',
                    ease: 'power1.out',
                    duration: .265
                }, {
                    morphSVG: 'M0 12C0 12 60 ' + 12 + ' 100 ' + 12 + 'C140 ' + 12 + ' 200 12 200 12V56C200 56 140 ' + 56 + ' 100 ' + 56 + 'C60 ' + 56 + ' 0 56 0 56V12Z',
                    ease: 'elastic.out(1, .5)',
                    duration: .715,
                    onComplete() {
                        button.classList.remove('in', 'out')
                    }
                }]
            });
        }
    });
});

External CSS

  1. https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js