Button by Dashrath-Sharma

1button {
2  cursor: pointer;
3  padding: 1em 2em;
4  font-weight: bold;
5  font-size: 20px;
6  color: #fff;
7  position: relative;
8  overflow: hidden;
9  background: rgba(60, 73, 203, 0.35);
10  box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);
11  backdrop-filter: blur(14.5px);
12  border: 1px solid rgba(255, 255, 255, 0.18);
13  -webkit-backdrop-filter: blur(14.5px);
14}
15
16button:hover {
17  box-shadow: 0px 0 32px 0 rgba(31, 38, 135, 0.37),
18    0px 0 32px 0 rgba(31, 38, 135, 0.37), 0 0 42px 0px rgba(31, 38, 135, 0.37),
19    0 0 52px 0 rgba(31, 38, 135, 0.37);
20  border: 1px solid rgba(255, 255, 255, 0.58);
21}
22
23button,
24button::before {
25  display: grid;
26  place-items: center;
27  border-radius: 10px;
28  box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);
29}
30
31button::before {
32  content: "Button";
33  position: absolute;
34  background: blue;
35  width: 90%;
36  height: 80%;
37  background: rgba(26, 18, 241, 0.25);
38  backdrop-filter: blur(18.5px);
39  -webkit-backdrop-filter: blur(18.5px);
40  border: 1px solid rgba(255, 255, 255, 0.18);
41  transition: 0.4s;
42}
43
44button:hover::before {
45  background: rgba(51, 57, 236, 0.4);
46  box-shadow: 1px 1px 2px 0 rgba(31, 38, 135, 0.37),
47    2px 2px 2px 0 rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37),
48    0 0px 32px 1px rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37);
49  backdrop-filter: blur(5.5px);
50  -webkit-backdrop-filter: blur(5.5px);
51  border-radius: 10px;
52  border: 1px solid rgba(255, 255, 255, 0.18);
53}
54button:active::before {
55  transform: scale(0.67);
56}
57