Button by Brian-Pob

1button {
2  position: relative;
3  z-index: 1;
4  overflow: hidden;
5  border: none;
6  border-radius: 5px;
7  padding: 1rem 2rem;
8  font-size: 20px;
9  font-family: sans-serif;
10  background-color: purple;
11  color: white;
12  transition: all .7s ease-in-out;
13}
14
15button:hover {
16  color: purple;
17}
18
19button::before {
20  position: absolute;
21  display: inline-block;
22  top: 0;
23  left: 0;
24  z-index: -1;
25  border-radius: 5px;
26  width: 0;
27  height: 100%;
28  content: "";
29  background-color: white;
30  transition: all 700ms ease-in-out;
31}
32
33button:hover::before {
34  left: unset;
35  right: 0;
36  width: 100%;
37  transform: rotate(180deg);
38}