Button by gharsh11032000

1.btn {
2  position: relative;
3  transition: color 0.48s 0s cubic-bezier(0.23, 1, 0.32, 1),
4    transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
5  display: flex;
6  padding: 12px 24px;
7  align-items: center;
8  justify-content: center;
9  gap: 8px;
10  font-family: inherit;
11  font-size: 14px;
12  border: none;
13  cursor: pointer;
14  color: #000000;
15  overflow: hidden;
16  text-decoration: none;
17  background-color: transparent;
18}
19
20.btn span {
21  font-size: 1.2rem;
22  font-weight: 700;
23  line-height: 1.6;
24}
25
26.btn::before {
27  content: "";
28  position: absolute;
29  z-index: -1;
30  left: 0%;
31  top: 50%;
32  transform: translateY(-50%) scaleY(0);
33  width: 3px;
34  height: 100%;
35  background: #0a3cff;
36  transition: transform 0.48s 0.4s cubic-bezier(0.23, 1, 0.32, 1),
37    width 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
38}
39
40.btn:hover {
41  color: #ffffff;
42  transition: color 0.48s 0.24s cubic-bezier(0.23, 1, 0.32, 1),
43    transform 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
44}
45
46.btn:hover::before {
47  transform: translateY(-50%) scaleY(1);
48  width: 100%;
49  transition: transform 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1),
50    width 0.48s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
51}
52
53.btn:active {
54  transform: scale(0.95);
55}
56