Success Button
Button with spinner morphing into a checkmark
How to use it
- Paste the HTML where the buttons should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Success Button · NedDev · eigen werk. -->
<div class="jouw-container">
<button class="sck-btn"><span class="sck-label">Opslaan</span><span class="sck-spin"></span><svg class="sck-check" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></button>
</div>/* Success Button · NedDev · eigen werk. */
.sck-btn{position:relative;min-width:160px;height:50px;padding:0 26px;border:none;border-radius:12px;background:#0a0a0a;color:#fff;font-size:15px;font-weight:600;font-family:'Switzer',sans-serif;cursor:pointer;overflow:hidden;transition:background .3s,min-width .3s}
.sck-btn.sck-loading{min-width:50px;padding:0;width:50px;border-radius:50%}
.sck-btn.sck-done{background:#1f9d55;min-width:50px;padding:0;width:50px;border-radius:50%}
.sck-label{transition:opacity .2s}.sck-btn.sck-loading .sck-label,.sck-btn.sck-done .sck-label{opacity:0}
.sck-spin{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;opacity:0;animation:sck-rot .7s linear infinite}
.sck-btn.sck-loading .sck-spin{opacity:1}
@keyframes sck-rot{to{transform:rotate(360deg)}}
.sck-check{position:absolute;top:50%;left:50%;margin:-11px 0 0 -11px;opacity:0;stroke-dasharray:30;stroke-dashoffset:30}
.sck-btn.sck-done .sck-check{opacity:1;animation:sck-draw .4s ease forwards}
@keyframes sck-draw{to{stroke-dashoffset:0}}// Success Button · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.sck-btn')||root;root.addEventListener('click',function(){if(root.classList.contains('sck-loading')||root.classList.contains('sck-done'))return;root.classList.add('sck-loading');setTimeout(function(){root.classList.remove('sck-loading');root.classList.add('sck-done');setTimeout(function(){root.classList.remove('sck-done');},1600);},1300);});
}
init(document.querySelector('.jouw-container'));More buttons
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →