1button {
2  display: flex;
3  align-items: center;
4  color: #000;
5  background: none;
6  border: none;
7  padding: 12px 18px;
8  position: relative;
9  font-size: 1rem;
10  text-transform: uppercase;
11  font-weight: 700;
12  font-family: monospace;
13  transition: linear .3s;
14}
15
16button:hover {
17  color: #fff;
18}
19
20button::before {
21  content: "";
22  position: absolute;
23  top: 50%;
24  transform: translateY(-50%) translateX(calc(100% + 4px));
25  width: 45px;
26  height: 45px;
27  background-color: #dc143c;
28  border-radius: 50px;
29  transition: transform .25s .25s cubic-bezier(0, 0, .5, 2), width .25s cubic-bezier(0, 0, .5, 2);
30  z-index: -1;
31}
32
33button:hover::before {
34  width: 100%;
35  transform: translateY(-50%) translateX(-18px);
36  transition: transform .25s cubic-bezier(0,0,.5,2);
37}