Button by Mohsinech

1.btn {
2  background: transparent;
3  border: 1px solid #141414;
4  outline: none;
5  padding: 12px 40px;
6  height: 60px;
7  border-radius: 100px;
8  overflow: hidden;
9  transform: scaleX(1);
10  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  cursor: pointer;
15}
16
17.btn:hover {
18  animation: animate-scaleX 0.6s cubic-bezier(0.4, 0, 0, 1);
19  background: transparent;
20}
21
22.btn::after {
23  content: "";
24  position: absolute;
25  left: 0;
26  bottom: 0;
27  background: black;
28  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1),
29    border-radius 0.5s cubic-bezier(0.4, 0, 0, 1);
30  width: 100%;
31  height: 100%;
32  border-radius: 50% 50% 0 0;
33  transform: translateY(100%);
34}
35
36.btn:hover::after {
37  transform: translateY(0%);
38  border-radius: 0;
39}
40
41.btn span {
42  font-size: 20px;
43  font-weight: 500;
44  overflow: hidden;
45  position: relative;
46  color: black;
47}
48
49.btn span:after {
50  width: 100%;
51  height: 100%;
52  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
53  content: attr(data-text);
54  display: flex;
55  justify-content: center;
56  align-items: center;
57  position: absolute;
58  left: 50%;
59  bottom: 0;
60  z-index: 1;
61  transform: translate(-50%, 100%);
62  color: white;
63}
64.btn:hover span:after {
65  transform: translate(-50%, 0);
66}
67
68.btn:focus {
69  outline: none;
70}
71
72@keyframes animate-scaleX {
73  0% {
74    transform: scaleX(1);
75  }
76  50% {
77    transform: scaleX(1.05);
78  }
79  100% {
80    transform: scaleX(1);
81  }
82}
83