#e8e8e8
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}
10K views
10K views
Comments
Variations
2adamgiebl
Pro+
431 views
MIT License