1button {
2  position: relative;
3  background: #6a92ef;
4  color: white;
5  padding: .9rem 2.20rem;
6  border-radius: 2rem;
7  transition: .5s;
8  border: none;
9}
10
11button::after {
12  content: '';
13  width: 80%;
14  height: 40%;
15  background: linear-gradient(80deg, hsl(217, 77%, 71%) 10%, hsl(218, 76%, 84%) 48%);
16  position: absolute;
17  left: 0;
18  right: 0;
19  bottom: -5px;
20  margin: 0 auto;
21  border-radius: 2rem;
22  filter: blur(8px);
23  z-index: -9;
24  opacity: 0;
25  transition: opacity .4s;
26}
27
28.text {
29  position: relative;
30  z-index: 10;
31}
32
33button svg {
34  position: absolute;
35  inset: 0;
36  margin: auto;
37  pointer-events: none;
38  transition: .6s;
39  opacity: 0;
40}
41
42svg.star {
43  width: 18px;
44  transform: translate(-25px, -6px) rotate(55deg);
45  filter: blur(.4px);
46  color: hsl(210, 40%, 47%);
47}
48
49svg.moon {
50  width: 18px;
51  transform: translate(7px, -14) rotate(80deg);
52  filter: blur(.5px);
53  color: hsl(210, 40%, 47%);
54}
55
56svg.meteor {
57  width: 16px;
58  transform: translate(34px, -4px) rotate(-45deg);
59  filter: blur(.4px);
60  color: hsl(210, 40%, 47%);
61}
62
63button:active {
64  color: #ffffff;
65  transform: scale(1.2);
66}
67
68button:hover::after {
69  opacity: 1;
70}
71
72button:hover {
73  transform: scale(1.3);
74}
75
76button:hover svg {
77  opacity: 1;
78}
79
80button:hover svg.star {
81  transform: translate(-55px, -20px) rotate(55deg) scale(1.8);
82}
83
84button:hover svg.moon {
85  transform: translate(50px, -32px) rotate(0deg) scale(1.4);
86}
87
88button:hover svg.meteor {
89  transform: translate(28px, 30px) rotate(260deg) scale(2);
90}