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: 0;
22}
23
24button:hover::after {
25 right: auto;
26 left: 0;
27 width: 100%;
28}
29
30button span {
31 text-align: center;
32 text-decoration: none;
33 width: 100%;
34 padding: 18px 25px;
35 color: #fff;
36 font-size: 1.125em;
37 font-weight: 700;
38 letter-spacing: 0.3em;
39 z-index: 20;
40 transition: all 0.3s ease-in-out;
41}
42
43button:hover span {
44 color: #183153;
45 animation: scaleUp 0.3s ease-in-out;
46}
47
48@keyframes scaleUp {
49 0% {
50  transform: scale(1);
51 }
52
53 50% {
54  transform: scale(0.95);
55 }
56
57 100% {
58  transform: scale(1);
59 }
60}
61