1/* === removing default button style ===*/
2.buttonpma {
3  margin: 0;
4  height: auto;
5  background: transparent;
6  padding: 0;
7  border: none;
8  animation: r1 3s ease-in-out infinite;
9 /*linear*/
10  border: 7px #056bfa21 solid;
11  border-radius: 14px;
12}
13
14/* button styling */
15.buttonpma {
16  --border-right: 6px;
17  --text-stroke-color: rgba(85, 87, 255, 0.78);
18  --animation-color: #056bfa;
19  --fs-size: 2em;
20  letter-spacing: 3px;
21  text-decoration: none;
22  font-size: var(--fs-size);
23  font-family: "Arial";
24  position: relative;
25  text-transform: uppercase;
26  color: transparent;
27  -webkit-text-stroke: 1px var(--text-stroke-color);
28}
29/* this is the text, when you hover on button */
30.hover-text {
31  position: absolute;
32  box-sizing: border-box;
33  content: attr(data-text);
34  color: var(--animation-color);
35  width: 0%;
36  inset: 0;
37  border-right: var(--border-right) solid var(--animation-color);
38  overflow: hidden;
39  transition: 1.5s;
40  -webkit-text-stroke: 1px var(--animation-color);
41  animation: r2 2s ease-in-out infinite;
42}
43/* hover */
44.buttonpma:hover .hover-text {
45  width: 100%;
46  filter: drop-shadow(0 0 70px var(--animation-color))
47}
48
49@keyframes r1 {
50  50% {
51    transform: rotate(-1deg) rotateZ(-10deg);
52  }
53}
54
55@keyframes r2 {
56  50% {
57    transform: rotateX(-65deg);
58  }
59}