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
38button .blob:nth-child(2) {
39  left: 0em;
40  top: 0;
41  background: #541388;
42}
43
44button .blob:nth-child(3) {
45  left: 1.8em;
46  top: 0;
47  z-index: -1;
48  background: #1768AC;
49}
50
51button .blob:nth-child(4) {
52  left: 4em;
53  top: -1em;
54  background: #A2D7D3;
55}
56
57button .blob:nth-child(5) {
58  left: 4.3em;
59  top: 1.6em;
60  background: #F5A962;
61}
62
63button:hover .blob:nth-child(2) {
64  background: #F5A962;
65}
66
67button:hover .blob:nth-child(3) {
68  background: #A2D7D3;
69}
70
71button:hover .blob:nth-child(4) {
72  background: #1768AC;
73}
74
75button:hover .blob:nth-child(5) {
76  background: #541388;
77}
78
79button:hover .blob {
80  transform: scale(1.3);
81}
82
83button:active {
84  border: 2px solid white;
85}