1button {
2  font-size: 28px;
3  color: rgb(35, 75, 83);
4  background-color: rgb(217, 238, 242);
5  background-image: linear-gradient(180deg, rgb(201, 194, 240) 30%, transparent 70%);
6  background-repeat: no-repeat;
7  background-position: center 45%;
8  background-size: 100% 200%;
9  padding: 10px 30px;
10  border-radius: 30px;
11  border: none;
12  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
13  position: relative;
14  transition: all 0.5s ease;
15  outline: none;
16}
17
18button::before, button::after {
19  content: "";
20  inset: 0;
21  position: absolute;
22  border-radius: 5em;
23}
24
25button::before {
26  background-image: radial-gradient(ellipse, rgba(204, 246, 255, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, #404040 -10%, transparent 30%, transparent 70%, #404040 110%);
27  box-shadow: inset 0 0.25em 0.75em rgba(0, 0, 0, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px rgba(25, 196, 230, 0.75);
28  background-blend-mode: overlay;
29  background-repeat: no-repeat;
30  background-size: 200% 80%, cover;
31  background-position: center 220%;
32  mix-blend-mode: overlay;
33  filter: blur(0);
34}
35
36button::after {
37  background: linear-gradient(180deg, rgba(213, 204, 255, 0.726), rgba(92, 74, 181, 0.75) 40%, transparent 80%);
38  top: 0.075em;
39  left: 0.75em;
40  right: 0.75em;
41  bottom: 1.4em;
42  filter: blur(1px);
43  mix-blend-mode: screen;
44}
45
46button:hover, button:active, button:focus {
47  outline: none;
48  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
49  background-position: center calc( 45% - 0.75em );
50}
51