1/* === removing default button style ===*/
2.button {
3  margin: 0;
4  height: auto;
5  background: transparent;
6  padding: 0;
7  border: none;
8  cursor: pointer;
9}
10
11/* button styling */
12.button {
13  --border-right: 6px;
14  --text-stroke-color: rgba(255,255,255,0.6);
15  --animation-color: #37FF8B;
16  --fs-size: 2em;
17  letter-spacing: 3px;
18  text-decoration: none;
19  font-size: var(--fs-size);
20  font-family: "Arial";
21  position: relative;
22  text-transform: uppercase;
23  color: transparent;
24  -webkit-text-stroke: 1px var(--text-stroke-color);
25}
26/* this is the text, when you hover on button */
27.hover-text {
28  position: absolute;
29  box-sizing: border-box;
30  content: attr(data-text);
31  color: var(--animation-color);
32  width: 0%;
33  inset: 0;
34  border-right: var(--border-right) solid var(--animation-color);
35  overflow: hidden;
36  transition: 0.5s;
37  -webkit-text-stroke: 1px var(--animation-color);
38}
39/* hover */
40.button:hover .hover-text {
41  width: 100%;
42  filter: drop-shadow(0 0 23px var(--animation-color))
43}