Button by Abdulahuwu1

1.btn {
2  --color: #000000;
3  --color2: #ffffff;
4  padding: 0.8em 1.75em;
5  background-color: #ffffff;
6  border-radius: 6px;
7  border: 0.3px solid var(--color);
8  transition: 4s;
9  position: relative;
10  overflow: hidden;
11  cursor: pointer;
12  z-index: 1;
13  font-weight: 300;
14  font-size: 17px;
15  font-family: cursive;
16  text-transform: uppercase;
17  color: var(--color);
18}
19
20.btn::after,
21.btn::before {
22  content: "";
23  display: block;
24  height: 100%;
25  width: 100%;
26  transform: skew(90deg) translate(-50%, -50%);
27  position: absolute;
28  inset: 50%;
29  left: 25%;
30  z-index: -1;
31  transition: 0.5s ease-out;
32  background-color: var(--color);
33}
34
35.btn::before {
36  top: -50%;
37  left: -25%;
38  transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
39}
40
41.btn:hover::before {
42  transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
43}
44
45.btn:hover::after {
46  transform: skew(45deg) translate(-50%, -50%);
47}
48
49.btn:hover {
50  color: var(--color2);
51}
52
53.btn:active {
54  filter: brightness(0.7);
55  transform: scale(0.98);
56}
57