<button class="button-hold outer">
    <ul>
        <li>Publish</li>
        <li>Sure ?</li>
        <li>Public</li>
    </ul>
    <svg viewBox="0 0 120 43">
        <path d="M60,2 L99,2 C107.677966,2 118,9.65853659 118,21.5 C118,33.3414634 107.677966,41 99,41 L60,41 L21,41 C12.3220339,41 2,33.3414634 2,21.5 C2,9.65853659 12.3220339,2 21,2 L60,2 Z"></path>
    </svg>
</button>

<button class="button-hold inner">
    <ul>
        <li>Publish</li>
        <li>Sure ?</li>
        <li>Public</li>
    </ul>
    <svg viewBox="0 0 120 43">
        <path d="M60,2 L99,2 C107.677966,2 118,9.65853659 118,21.5 C118,33.3414634 107.677966,41 99,41 L60,41 L21,41 C12.3220339,41 2,33.3414634 2,21.5 C2,9.65853659 12.3220339,2 21,2 L60,2 Z"></path>
    </svg>
</button>

<button class="button-hold fill">
    <ul>
        <li>Publish</li>
        <li>Sure ?</li>
        <li>Public</li>
    </ul>
</button>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/shots/8968548-Hold-to-confirm-exploration" 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-hold {
    --color: #F6F8FF;
    --background: #1E2235;
    --shadow: #{rgba(#00093D, .2)};
    --progress: #275EFE;
    --outer-border: #A6ACCD;
    --fill: #2B3044;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    padding: 12px 0;
    border: 0;
    width: 120px;
    border-radius: 24px;
    outline: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    backface-visibility: hidden;
    -webkit-appearance: none;
    transition: box-shadow .3s, transform .3s;
    box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 12px) var(--shadow);
    color: var(--color);
    background: var(--b, var(--background));
    transform: scale(var(--scale, 1));
    ul {
        margin: 0;
        padding: 0;
        text-align: center;
        pointer-events: none;
        list-style: none;
        position: relative;
        z-index: 3;
        backface-visibility: hidden;
        li {
            top: var(--t, 0);
            backface-visibility: hidden;
            transform: translateY(var(--ul-y)) translateZ(0);
            transition: transform .3s, opacity .2s;
            &:not(:first-child) {
                --o: 0;
                position: absolute;
                left: 0;
                right: 0;
            }
            &:nth-child(1) {
                opacity: var(--ul-o-1, 1);
            }
            &:nth-child(2) {
                --t: 100%;
                opacity: var(--ul-o-2, 0);
            }
            &:nth-child(3) {
                --t: 200%;
                opacity: var(--ul-o-3, 0);
            }
        }
    }
    &:focus,
    &:hover {
        &:not(.process) {
            &:not(.success) {
                --shadow-y: 8px;
                --shadow-blur: 16px;
            }
        }
    }
    &:active {
        &:not(.success) {
            --shadow-y: 4px;
            --shadow-blur: 8px;
        }
    }
    &.process {
        --ul-y: -100%;
        --ul-o-1: 0;
        --ul-o-2: 1;
        --ul-o-3: 0;
    }
    &.success {
        --ul-y: -200%;
        --ul-o-1: 0;
        --ul-o-2: 0;
        --ul-o-3: 1;
    }
    &.outer,
    &.inner {
        svg {
            top: 0;
            left: 0;
            width: 120px;
            height: 43px;
            stroke: var(--progress);
            stroke-width: 4px;
            fill: none;
            position: absolute;
            display: block;
            stroke-linecap: round;
            stroke-dasharray: var(--array, 282) 284;
            stroke-dashoffset: var(--offset, 282);
            z-index: var(--i, 1);
            transition: stroke-dashoffset var(--duration) linear, stroke-dasharray .4s linear;
        }
        &.process,
        &.success {
            --offset: 0;
            --array: 284;
        }
    }
    &.outer {
        --b: var(--outer-border);
        &:before {
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            position: absolute;
            border-radius: inherit;
            transition: transform .3s;
            background: var(--background);
            transform: scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
        }
        &:active {
            &:not(.success) {
                --scale-x: .94;
                --scale-y: .84;
            }
        }
        &.success {
            &:before {
                transition: box-shadow .5s, transform .3s;
                box-shadow: inset 0 0 0 24px var(--progress);
            }
        }
    }
    &.inner {
        svg {
            --i: 3;
        }
        &.success {
            transition: box-shadow .5s, transform .3s;
            box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 12px) var(--shadow), inset 0 0 0 24px var(--progress);
        }
    }
    &.fill {
        --b: linear-gradient(90deg, var(--progress) 0%, var(--progress) 33.33%, var(--fill) 33.33%, var(--fill) 66.66%, var(--background) 66.66%, var(--background) 100%)  left var(--p, 100%) top 0;
        background-position-x: var(--p, 100%);
        background-size: 300% 100%;
        transition: background-position var(--duration) linear, box-shadow .3s, transform .3s;
        &:active {
            &:not(.success) {
                --scale: .94;
            }
        }
        &.process,
        &.success {
            --p: 50%;
        }
        &.success {
            --p: 0;
            transition: background .5s, box-shadow .3s, transform .3s;
        }
    }
}

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: 'Roboto', Arial;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #ECEFFC;
    button {
        margin: 12px 0;
    }
    .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
// Hold button with mouse / select with tab and hold spacebar

let duration = 1600,
    success = button => {
        //Success function
        button.classList.add('success');
    };

document.querySelectorAll('.button-hold').forEach(button => {
    button.style.setProperty('--duration', duration + 'ms');
    ['mousedown', 'touchstart', 'keypress'].forEach(e => {
        button.addEventListener(e, ev => {
            if(e != 'keypress' || (e == 'keypress' && ev.which == 32 && !button.classList.contains('process'))) {
                button.classList.add('process');
                button.timeout = setTimeout(success, duration, button);
            }
        });
    });
    ['mouseup', 'mouseout', 'touchend', 'keyup'].forEach(e => {
        button.addEventListener(e, ev => {
            if(e != 'keyup' || (e == 'keyup' && ev.which == 32)) {
                button.classList.remove('process');
                clearTimeout(button.timeout);
            }
        }, false);
    });
});

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.