Button by adamgiebl

1.c-button {
2  color: white;
3  font-weight: bold;
4  font-size: 18px;
5  text-decoration: none;
6  padding: 1em 2em;
7  cursor: pointer;
8  display: inline-block;
9  vertical-align: middle;
10  position: relative;
11  z-index: 1;
12  background-color: #06c8d9;
13  border: none;
14}
15
16.c-button--gooey {
17  color: white;
18  text-transform: uppercase;
19  letter-spacing: 2px;
20  border-radius: 0;
21  position: relative;
22  transition: all 700ms ease;
23}
24
25.c-button--gooey .c-button__blobs {
26  height: 100%;
27  filter: url(#goo);
28  overflow: hidden;
29  position: absolute;
30  top: 0;
31  left: 0;
32  bottom: -3px;
33  right: -1px;
34  z-index: -1;
35}
36
37.c-button--gooey .c-button__blobs div {
38  background-color: #fff;
39  width: 34%;
40  height: 100%;
41  border-radius: 100%;
42  position: absolute;
43  transform: scale(1.4) translateY(-125%) translateZ(0);
44  transition: all 700ms ease;
45}
46
47.c-button--gooey .c-button__blobs div:nth-child(1) {
48  left: -5%;
49}
50
51.c-button--gooey .c-button__blobs div:nth-child(2) {
52  left: 30%;
53  transition-delay: 60ms;
54}
55
56.c-button--gooey .c-button__blobs div:nth-child(3) {
57  left: 66%;
58  transition-delay: 25ms;
59}
60
61/* Hover styles */
62.c-button--gooey:hover {
63  color: #06c8d9;
64  background-color: #ffffff;
65}
66
67.c-button--gooey:hover .c-button__blobs div {
68  transform: scale(1.4) translateY(0) translateZ(0);
69}