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}