Button by 3bdel3ziz-T

1/*Global btn styles*/
2.btn {
3  position: relative;
4  display: inline-block;
5  cursor: pointer;
6  outline: none;
7  vertical-align: middle;
8  text-decoration: none;
9  background: transparent;
10  font-size: 15px;
11  border: none;
12}
13/*Container styles*/
14.container {
15  display: flex;
16  flex-direction: column;
17  justify-content: center;
18  align-items: center;
19  gap: 15px;
20}
21/*Main button styles*/
22.btn {
23  position: relative;
24  height: fit-content;
25  display: flex;
26  justify-content: left;
27  align-items: center;
28  width: 140px;
29  height: 40px;
30  text-align: center;
31  text-transform: uppercase;
32  text-indent: 50px;
33  transition: 300ms;
34  font-weight: 500;
35}
36
37.btn::before {
38  content: "";
39  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
40  position: absolute;
41  left: 0;
42  display: block;
43  width: 40px;
44  height: 40px;
45  border-radius: 20px;
46  background-color: #282936;
47  z-index: -1;
48}
49
50.btn::after {
51  content: "";
52  position: absolute;
53  top: 50%;
54  left: 17px;
55  transform: translate(-50%, -50%) rotate(45deg);
56  width: 12px;
57  height: 12px;
58  border-top: 2px solid #fff;
59  border-right: 2px solid #fff;
60  transition: 400ms;
61}
62
63.btn:hover {
64  text-indent: 15px;
65  color: white;
66  font-weight: 600;
67}
68.btn:active {
69  scale: 0.95;
70}
71
72.btn:hover::before {
73  width: 100%;
74}
75
76.btn:hover::after {
77  left: calc(100% - 25px);
78}
79