Processing button CSS

Processing button / Botón procesando o enviado con CSS, HTML Y JS.

By: Aaron Iker

HTML

<button class="button">
 <span>Submit</span>
 <svg viewBox="0 0 15 13">
 <polyline points="2 6.5 6 10.5 13 2.5"></polyline>
 </svg>
</button>

HTML (Optional/Opcional)

<a href="" class="restart">
 <svg viewBox="0 0 16 16" fill="currentColor">
 <path d="M4.5,4.5c1.9-1.9,5.1-1.9,7,0c0.7,0.7,1.2,1.7,1.4,2.7l2-0.3C14.7,5.4,14,4.1,13,3.1c-2.7-2.7-7.1-2.7-9.9,0 L0.9,0.9L0.2,7.3l6.4-0.7L4.5,4.5z"></path>
 <path d="M15.8,8.7L9.4,9.4l2.1,2.1c-1.9,1.9-5.1,1.9-7,0c-0.7-0.7-1.2-1.7-1.4-2.7l-2,0.3 C1.3,10.6,2,11.9,3,12.9c1.4,1.4,3.1,2,4.9,2c1.8,0,3.6-0.7,4.9-2l2.2,2.2L15.8,8.7z"></path>
 </svg>
 Restart
</a>
CSS

.button{--color:#fff;--background:#6D58FF;--height:41px;--width:160px;--icon:#fff;padding:0;cursor:pointer;text-align:center;position:relative;border:none;outline:0;background:0 0;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;width:var(--width);letter-spacing:.5px;font-size:14px;font-weight:500;color:var(--color);line-height:var(--height)}
.button:after,.button:before{content:'';display:block;position:absolute;top:50%;left:50%}
.button:before{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:var(--before-w,var(--width));height:var(--before-h,var(--height));border-radius:var(--before-r,7px);background:var(--background);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:width .3s,height .3s,border-radius .2s;transition-delay:.2s}
.button:after{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--icon);z-index:2;border-radius:50%;-webkit-transform:scale(0);transform:scale(0)}
.button span{z-index:1;display:block;position:relative;opacity:var(--span-o,1);-webkit-transform:scale(var(--span-s,1));transform:scale(var(--span-s,1));transition:opacity .3s,-webkit-transform .2s;transition:opacity .3s,transform .2s;transition:opacity .3s,transform .2s,-webkit-transform .2s;transition-delay:.2s}
.button svg{width:15px;height:13px;display:block;position:absolute;left:50%;top:50%;stroke:var(--icon);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);stroke-dasharray:17px;stroke-dashoffset:var(--svg-o,17px);transition:stroke-dashoffset .3s ease}
.button.processing{--before-w:41px;--before-h:41px;--before-r:22px;--span-o:0;--span-s:.6;--after-s:1;--svg-o:34px}
.button.processing:before{-webkit-animation:pulse 3s linear forwards;animation:pulse 3s linear forwards}
.button.processing:after{-webkit-animation:dot 3s linear forwards;animation:dot 3s linear forwards}
.button.processing svg{transition-delay:3s}
@-webkit-keyframes pulse{4%{-webkit-transform:translate(-50%,-50%) scaleX(1.1);transform:translate(-50%,-50%) scaleX(1.1)}
8%{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
24%,56%,88%{-webkit-transform:translate(-50%,-50%) scale(0.8);transform:translate(-50%,-50%) scale(0.8)}
40%,72%{-webkit-transform:translate(-50%,-50%) scale(1.2);transform:translate(-50%,-50%) scale(1.2)}}
@keyframes pulse{4%{-webkit-transform:translate(-50%,-50%) scaleX(1.1);transform:translate(-50%,-50%) scaleX(1.1)}
8%{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
24%,56%,88%{-webkit-transform:translate(-50%,-50%) scale(0.8);transform:translate(-50%,-50%) scale(0.8)}
40%,72%{-webkit-transform:translate(-50%,-50%) scale(1.2);transform:translate(-50%,-50%) scale(1.2)}}
@-webkit-keyframes dot{8%{-webkit-transform:scale(0);transform:scale(0)}
16%{-webkit-transform:scale(1) rotate(30deg) translateX(48px);transform:scale(1) rotate(30deg) translateX(48px)}
95%{-webkit-transform:scale(1) rotate(1000deg) translateX(48px);transform:scale(1) rotate(1000deg) translateX(48px)}
100%{-webkit-transform:scale(0.125) rotate(1050deg) translate(52px,-6px);transform:scale(0.125) rotate(1050deg) translate(52px,-6px)}}
@keyframes dot{8%{-webkit-transform:scale(0);transform:scale(0)}
16%{-webkit-transform:scale(1) rotate(30deg) translateX(48px);transform:scale(1) rotate(30deg) translateX(48px)}
95%{-webkit-transform:scale(1) rotate(1000deg) translateX(48px);transform:scale(1) rotate(1000deg) translateX(48px)}
100%{-webkit-transform:scale(0.125) rotate(1050deg) translate(52px,-6px);transform:scale(0.125) rotate(1050deg) translate(52px,-6px)}}
.restart{display:table;position:absolute;bottom:4%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);text-decoration:none;line-height:23px;color:#404660;font-size:14px;font-weight:500}
.restart svg{margin:4px 4px 0 0;width:16px;height:16px;display:inline-block;vertical-align:top}
html{box-sizing:border-box;-webkit-font-smoothing:antialiased}
*,:after,:before{box-sizing:inherit}
body{min-height:100vh;display:flex;font-family:Roboto,Arial;justify-content:center;align-items:center;flex-direction:column;background:#0D0F18}

JS

document.querySelectorAll('.button').forEach(button => {
    button.addEventListener('click', e => {
        button.classList.add('processing');
        e.preventDefault();
    });
});

JS (Optional/Opcional)

document.querySelector('.restart').addEventListener('click', e => {
    document.querySelectorAll('.button').forEach(button => {
        button.classList.remove('processing');
    });
    e.preventDefault();
});
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

CSS Border Transitions
Sign-post arrow buttons with CSS