Button by doniaskima

1.btn-12,
2.btn-12 *,
3.btn-12 :after,
4.btn-12 :before,
5.btn-12:after,
6.btn-12:before {
7  border: 0 solid;
8  box-sizing: border-box;
9}
10
11.btn-12 {
12  -webkit-tap-highlight-color: transparent;
13  -webkit-appearance: button;
14  background-color: #000;
15  background-image: none;
16  color: #fff;
17  cursor: pointer;
18  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
19    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
20    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
21  font-size: 100%;
22  font-weight: 900;
23  line-height: 1.5;
24  margin: 0;
25  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
26  padding: 0;
27  text-transform: uppercase;
28}
29
30.btn-12:disabled {
31  cursor: default;
32}
33
34.btn-12:-moz-focusring {
35  outline: auto;
36}
37
38.btn-12 svg {
39  display: block;
40  vertical-align: middle;
41}
42
43.btn-12 [hidden] {
44  display: none;
45}
46
47.btn-12 {
48  border-radius: 99rem;
49  border-width: 2px;
50  overflow: hidden;
51  padding: 0.8rem 3rem;
52  position: relative;
53}
54
55.btn-12 span {
56  mix-blend-mode: difference;
57}
58
59.btn-12:after,
60.btn-12:before {
61  background: linear-gradient(
62    90deg,
63    #fff 25%,
64    transparent 0,
65    transparent 50%,
66    #fff 0,
67    #fff 75%,
68    transparent 0
69  );
70  content: "";
71  inset: 0;
72  position: absolute;
73  transform: translateY(var(--progress, 100%));
74  transition: transform 0.2s ease;
75}
76
77.btn-12:after {
78  --progress: -100%;
79  background: linear-gradient(
80    90deg,
81    transparent 0,
82    transparent 25%,
83    #fff 0,
84    #fff 50%,
85    transparent 0,
86    transparent 75%,
87    #fff 0
88  );
89  z-index: -1;
90}
91
92.btn-12:hover:after,
93.btn-12:hover:before {
94  --progress: 0;
95}
96