1button {
2  position: relative;
3  padding: 0;
4  width: 135px;
5  height: 65px;
6  background: transparent;
7  font-size: 17px;
8  border: 1px solid #ffffff1c;
9  border-radius: 8px;
10  box-shadow: inset 0 0 10px #ffffff1c;
11}
12
13button::before {
14  content: "";
15  position: absolute;
16  top: 50%;
17  left: 50%;
18  transform: translate(-50%, -50%);
19  width: 135px;
20  height: 65px;
21  background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%);
22  /* background-size: 200%; */
23  background-repeat: no-repeat;
24  filter: opacity(.3) blur(.3em);
25}
26
27button::after {
28  content: "";
29  position: absolute;
30  top: 120%;
31  left: 0;
32  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
33  height: 100%;
34  width: 100%;
35  background-color: #fbfd7b;
36  filter: blur(2em);
37  opacity: 0;
38  pointer-events: none;
39}
40
41button p {
42  display: inline-block;
43  width: 135px;
44  line-height: 65px;
45  font-size: 17px;
46  font-weight: 900;
47  color: #d6d6d6;
48  filter: blur(.02em);
49  z-index: 5;
50}
51
52button .svg-1 {
53  position: absolute;
54  top: 50%;
55  left: 20%;
56  transform: translate(0, -50%) rotate(45deg);
57  width: 2.5rem;
58  height: auto;
59  filter: blur(.1rem) opacity(.5);
60  z-index: -5;
61}
62
63.fil0 {
64  fill: #935E28
65}
66
67button:hover {
68  filter: blur(.05em);
69  animation: lightBox 1s ease-in-out forwards;
70}
71
72button:hover::after {
73  animation: light 1s ease-in-out forwards;
74}
75
76button:hover p {
77  animation: lightText 1s ease-in-out forwards;
78}
79
80@keyframes lightBox {
81  0% {
82    border: 1px solid #fbfd7b;
83    box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a;
84  }
85
86  20% {
87    border: 1px solid #ffffff1c;
88    box-shadow: none;
89  }
90
91  30% {
92    border: 1px solid #fbfd7b;
93    box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a;
94  }
95
96  38% {
97    border: 1px solid #ffffff1c;
98    box-shadow: none;
99  }
100
101  45% {
102    border: 1px solid #fbfd7b;
103    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a;
104  }
105
106  50% {
107    border: 1px solid #ffffff1c;
108    box-shadow: none;
109  }
110
111  53% {
112    border: 1px solid #fbfd7b;
113    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;
114  }
115
116  65% {
117    border: 1px solid #ffffff1c;
118    box-shadow: none;
119  }
120
121  100% {
122    border: 1px solid #fbfd7b;
123    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;
124  }
125}
126
127@keyframes light {
128  0% {
129    opacity: .7;
130  }
131
132  20% {
133    opacity: 0;
134  }
135
136  30% {
137    opacity: .7;
138  }
139
140  38% {
141    opacity: 0;
142  }
143
144  45% {
145    opacity: .7;
146  }
147
148  50% {
149    opacity: 0;
150  }
151
152  53% {
153    opacity: .7;
154  }
155
156  65% {
157    opacity: 0;
158  }
159
160  100% {
161    opacity: .7;
162  }
163}
164
165@keyframes lightText {
166  0% {
167    color: #fbfd7b;
168    text-shadow: 0 0 5px #fbfd7b8a;
169  }
170
171  20% {
172    color: #ffffff;
173    text-shadow: none;
174  }
175
176  30% {
177    color: #fbfd7b;
178    text-shadow: 0 0 10px #fbfd7b8a;
179  }
180
181  38% {
182    color: #ffffff;
183    text-shadow: none;
184  }
185
186  45% {
187    color: #fbfd7b;
188    text-shadow: 0 0 15px #fbfd7b8a;
189  }
190
191  50% {
192    color: #ffffff;
193    text-shadow: none;
194  }
195
196  53% {
197    color: #fbfd7b;
198    text-shadow: 0 0 15px #fbfd7b8a;
199  }
200
201  65% {
202    color: #ffffff;
203    text-shadow: none;
204  }
205
206  100% {
207    color: #fbfd7b;
208    text-shadow: 0 0 15px #fbfd7b8a;
209  }
210}