Button by gagan-gv

1.btn {
2  width: 150px;
3  height: 50px;
4  border-radius: 5px;
5  border: none;
6  transition: all 0.5s ease-in-out;
7  font-size: 20px;
8  font-family: Verdana, Geneva, Tahoma, sans-serif;
9  font-weight: 600;
10  display: flex;
11  align-items: center;
12  background: #040f16;
13  color: #f5f5f5;
14}
15
16.btn:hover {
17  box-shadow: 0 0 20px 0px #2e2e2e3a;
18}
19
20.btn .icon {
21  position: absolute;
22  height: 40px;
23  width: 70px;
24  display: flex;
25  justify-content: center;
26  align-items: center;
27  transition: all 0.5s;
28}
29
30.btn .text {
31  transform: translateX(55px);
32}
33
34.btn:hover .icon {
35  width: 175px;
36}
37
38.btn:hover .text {
39  transition: all 0.5s;
40  opacity: 0;
41}
42
43.btn:focus {
44  outline: none;
45}
46
47.btn:active .icon {
48  transform: scale(0.85);
49}