Button by imPradhyumn

1button {
2  position: relative;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  border-radius: 5px;
7  background: #183153;
8  font-family: "Montserrat", sans-serif;
9  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
10  overflow: hidden;
11  border: none;
12}
13
14button:after {
15  content: " ";
16  width: 0%;
17  height: 100%;
18  background: #FFD401;
19  position: absolute;
20  transition: all 0.4s ease-in-out;
21  right: auto;
22  left: auto;
23}
24
25button:hover::after {
26  right: auto;
27  left: auto;
28  width: 100%;
29}
30
31button span {
32  text-align: center;
33  text-decoration: none;
34  width: 100%;
35  padding: 18px 25px;
36  color: #fff;
37  font-size: 1.125em;
38  font-weight: 700;
39  letter-spacing: 0.3em;
40  z-index: 20;
41  transition: all 0.3s ease-in-out;
42}
43
44button:hover span {
45  color: #183153;
46  animation: scaleUp 0.3s ease-in-out;
47}
48
49@keyframes scaleUp {
50  0% {
51    transform: scale(1);
52  }
53
54  50% {
55    transform: scale(0.95);
56  }
57
58  100% {
59    transform: scale(1);
60  }
61}
62