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