5.1K views
CSSAdd prefixes
1.c-button { 2 color: #000; 3 font-weight: 700; 4 font-size: 16px; 5 text-decoration: none; 6 padding: 0.9em 1.6em; 7 cursor: pointer; 8 display: inline-block; 9 vertical-align: middle; 10 position: relative; 11 z-index: 1; 12} 13 14.c-button--gooey { 15 color: #06c8d9; 16 text-transform: uppercase; 17 letter-spacing: 2px; 18 border: 4px solid #06c8d9; 19 border-radius: 0; 20 position: relative; 21 transition: all 700ms ease; 22} 23 24.c-button--gooey .c-button__blobs { 25 height: 100%; 26 filter: url(#goo); 27 overflow: hidden; 28 position: absolute; 29 top: 0; 30 left: 0; 31 bottom: -3px; 32 right: -1px; 33 z-index: -1; 34} 35 36.c-button--gooey .c-button__blobs div { 37 background-color: #06c8d9; 38 width: 34%; 39 height: 100%; 40 border-radius: 100%; 41 position: absolute; 42 transform: scale(1.4) translateY(125%) translateZ(0); 43 transition: all 700ms ease; 44} 45 46.c-button--gooey .c-button__blobs div:nth-child(1) { 47 left: -5%; 48} 49 50.c-button--gooey .c-button__blobs div:nth-child(2) { 51 left: 30%; 52 transition-delay: 60ms; 53} 54 55.c-button--gooey .c-button__blobs div:nth-child(3) { 56 left: 66%; 57 transition-delay: 25ms; 58} 59 60.c-button--gooey:hover { 61 color: #fff; 62} 63 64.c-button--gooey:hover .c-button__blobs div { 65 transform: scale(1.4) translateY(0) translateZ(0); 66}
HTML
1<button class="c-button c-button--gooey"> Hover me 2 <div class="c-button__blobs"> 3 <div></div> 4 <div></div> 5 <div></div> 6 </div> 7</button> 8<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;"> 9 <defs> 10 <filter id="goo"> 11 <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur> 12 <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></feColorMatrix> 13 <feBlend in="SourceGraphic" in2="goo"></feBlend> 14 </filter> 15 </defs> 16</svg>