1@keyframes MoveBackground {
2  0% {
3    background-position-x: 0;
4  }
5
6  100% {
7    background-position-x: -165px;
8  }
9}
10
11@keyframes Scaning {
12  0% {
13    width: 0%;
14  }
15
16  30% {
17    width: 10%;
18  }
19
20  70% {
21    width: 40%;
22  }
23
24  100% {
25    width: 100%;
26  }
27}
28
29button {
30  background: none;
31  font-size: 20px;
32  font-weight: 700;
33  color: black;
34  text-transform: uppercase;
35  padding: 10px 30px;
36  position: relative;
37  background-color: white;
38  border-radius: 10px;
39  overflow: hidden;
40  transition-duration: 300ms;
41  border: none;
42  max-width: 1370px;
43  width: fit-content;
44}
45
46button:hover {
47  color: white;
48  border: 4px black solid;
49  max-width: 170px;
50  padding: 5px 30px;
51}
52
53button:active {
54  background: none;
55  color: white;
56  border: 4px #1F8A70 solid;
57  background-color: #1F8A70;
58  max-width: 170px;
59}
60
61button .progress {
62  display: none;
63}
64
65button:active .progress .progress-bar {
66  display: none;
67}
68
69button:hover .progress {
70 /* background-image: repeating-linear-gradient(-28deg, transparent, transparent 31px, #DC0000 19px, #DC000010 70px); */
71  display: block;
72  user-select: none;
73  width: 100%;
74  height: 100%;
75  position: absolute;
76  top: 0;
77  left: 0;
78  pointer-events: none;
79  transition-duration: 600ms;
80  overflow: hidden;
81  animation: Scaning 3s linear;
82}
83
84.progress .progress-bar {
85  width: 165px;
86  height: 100%;
87  background-image: repeating-linear-gradient(-25deg, transparent, transparent 31px, #000000 19px, #000000ee 70px);
88  animation: MoveBackground 2s linear infinite reverse;
89}
90
91button::before {
92  /* content: "<d"; */
93  background-color: white;
94  height: 100%;
95  width: 100%;
96}
97
98button:hover .before-scan,
99 .complete, .scaning {
100  display: none;
101}
102
103button:hover .scaning {
104  display: block;
105  mix-blend-mode: difference;
106  padding: 0px 0px;
107}
108
109button:active .scaning {
110  display: none;
111}
112
113button:active .complete {
114  display: block;
115}