Button by snguem

1.button {
2  cursor: pointer;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 230px;
7  height: 80px;
8  gap: 10px;
9  font-size: 20px;
10  font-weight: 700;
11  position: relative;
12  border-radius: 20px;
13  border: none;
14  box-shadow: 0px 0px 5px;
15  transition: width 0.5s 0.2s ease;
16}
17.button::after {
18  position: absolute;
19  content: "";
20  width: 95%;
21  height: 87%;
22  border-radius: 40px;
23  box-shadow: inset 5px 5px 25px #00000018, 1px 1px 10px #00000013;
24  transition: all 0.5s ease;
25}
26.button:hover:after {
27  width: 100%;
28  height: 100%;
29  border-radius: 20px;
30}
31.button svg {
32  width: 20px;
33  rotate: -45deg;
34  transform-origin: top;
35  transition: all 0.3s 0.2s ease-out;
36}
37.button:hover svg {
38  transform-origin: center;
39  width: 40px;
40}
41.button:hover span {
42  display: none;
43  margin: 0 auto;
44}
45
46.button:hover {
47  width: 100px;
48  gap: 0px;
49}
50