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  cursor: pointer;
11  overflow: hidden;
12  border: none;
13}
14
15button .text {
16  position: absolute;
17  left: 0;
18  top: 0;
19  width: 100%;
20  height: 100%;
21  line-height: 3em;
22  border-radius: 40em;
23  border: none;
24  background: linear-gradient(
25    rgba(255, 255, 255, 0.473),
26    rgba(150, 150, 150, 0.25)
27  );
28  z-index: 1;
29  backdrop-filter: blur(10px);
30  -webkit-backdrop-filter: blur(10px);
31}
32
33button .blob {
34  position: absolute;
35  z-index: -1;
36  border-radius: 5em;
37  width: 5em;
38  height: 3em;
39  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
40}
41
42button .blob:nth-child(2) {
43  left: 0em;
44  top: 0;
45  background: #ff930f;
46}
47
48button .blob:nth-child(3) {
49  left: 1.8em;
50  top: 0;
51  z-index: -1;
52  background: #bf0fff;
53}
54
55button .blob:nth-child(4) {
56  left: 4em;
57  top: -1em;
58  background: #ff1b6b;
59}
60
61button .blob:nth-child(5) {
62  left: 4.3em;
63  top: 1.6em;
64  background: #0061ff;
65}
66
67button:hover .blob:nth-child(2) {
68  background: #0061ff;
69}
70
71button:hover .blob:nth-child(3) {
72  background: #ff1b6b;
73}
74
75button:hover .blob:nth-child(4) {
76  background: #bf0fff;
77}
78
79button:hover .blob:nth-child(5) {
80  background: #ff930f;
81}
82
83button:hover .blob {
84  transform: scale(1.3);
85}
86
87button:active {
88  border: 2px solid white;
89}
90