Button by adamgiebl

1button {
2  position: relative;
3  font-family: inherit;
4  font-size: 18px;
5  border-radius: 40em;
6  width: 8em;
7  height: 3em;
8  z-index: 1;
9  color: white;
10  overflow: hidden;
11  border: none;
12}
13
14button .text {
15  position: absolute;
16  left: 0;
17  top: 0;
18  width: 100%;
19  height: 100%;
20  line-height: 3em;
21  border-radius: 40em;
22  border: none;
23  background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
24  z-index: 1;
25  backdrop-filter: blur(10px);
26  -webkit-backdrop-filter: blur(10px);
27}
28
29button .blob {
30  position: absolute;
31  z-index: -1;
32  border-radius: 5em;
33  width: 5em;
34  height: 3em;
35  transition: transform .3s ease-in-out, background .3s ease-in-out;
36}
37
38/* CHANGED COLORS */
39button .blob:nth-child(2) {
40  left: 0em;
41  top: 0;
42  background: #209CEE;
43 /* changed */
44}
45
46/* CHANGED COLORS */
47button .blob:nth-child(3) {
48  left: 1.8em;
49  top: 0;
50  z-index: -1;
51  background: #4DAF7C;
52 /* changed */
53}
54
55/* CHANGED COLORS */
56button .blob:nth-child(4) {
57  left: 4em;
58  top: -1em;
59  background: #F0916F;
60 /* changed */
61}
62
63/* CHANGED COLORS */
64button .blob:nth-child(5) {
65  left: 4.3em;
66  top: 1.6em;
67  background: #a8c7a8;
68 /* changed */
69}
70
71/* CHANGED COLORS */
72button:hover .blob:nth-child(2) {
73  background: #a8c7a8;
74 /* changed */
75}
76
77/* CHANGED COLORS */
78button:hover .blob:nth-child(3) {
79  background: #F0916F;
80 /* changed */
81}
82
83/* CHANGED COLORS */
84button:hover .blob:nth-child(4) {
85  background: #4DAF7C;
86 /* changed */
87}
88
89/* CHANGED COLORS */
90button:hover .blob:nth-child(5) {
91  background: #209CEE;
92 /* changed */
93}
94
95button:hover .blob {
96  transform: scale(1.3);
97}
98
99button:active {
100  border: 2px solid white;
101}