.buttons{text-align:center;border-radius:30px}:root{--cyan:#2eae8c;--dark:#239579;--border-width:2px;--num-of-blobs:4}.blob-btn{z-index:1;position:relative;width:200px;height:50px;text-align:center;text-transform:uppercase;color:#fff;font-size:16px;font-weight:700;background-color:var(--cyan);outline:none;border:none;transition:color .5s;cursor:pointer;border-radius:30px}.blob-btn:before{z-index:1;left:0;top:0}.blob-btn:after,.blob-btn:before{content:"";position:absolute;width:100%;height:100%;border-radius:30px}.blob-btn:after{z-index:-2;left:calc(var(--border-width) * 1.5);top:calc(var(--border-width) * 1.5);transition:all .3s .2s}.blob-btn:hover{color:#fff;border-radius:30px}.blob-btn:hover:after{transition:all .3s;left:0;top:0;border-radius:30px}.blob-btn__inner{z-index:-1;overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:30px;background:var(--cyan)}.blob-btn__blobs{position:relative;display:block;height:100%;filter:url(#goo)}.blob-btn__blob{position:absolute;top:var(--border-width);width:calc(100% / var(--num-of-blobs));height:100%;background:var(--dark);border-radius:100%;transform:translate3d(0,150%,0) scale(1.7);transition:transform .45s}@supports (filter:url("#goo")){.blob-btn__blob{transform:translate3d(0,150%,0) scale(1.4)}}.blob-btn:hover .blob-btn__blob{transform:translateZ(0) scale(1.7)}@supports (filter:url("#goo")){.blob-btn:hover .blob-btn__blob{transform:translateZ(0) scale(1.4)}}.blob-btn__blob:first-child{left:0;transition-delay:0s}.blob-btn__blob:nth-child(2){left:25%;transition-delay:.08s}.blob-btn__blob:nth-child(3){left:50%;transition-delay:.16s}.blob-btn__blob:nth-child(4){left:75%;transition-delay:.24s}.icon{cursor:pointer;position:relative;overflow:hidden;background-color:#ffffff30}.icon:after,.icon:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;transition:all .25s ease;border-radius:30px}.icon-fill:before{transition-duration:.2s;box-shadow:inset 0 0 0 0 #16a085}.icon-fill:hover:before{box-shadow:inset 0 0 0 60px #16a085}