1button {
2  padding: 15px 30px;
3  border: none;
4  outline: none;
5  border-radius: 30px;
6  font-size: 1.5rem;
7  z-index: 1;
8  position: relative;
9  -webkit-box-shadow: 0 5px 15px rgba(33, 33, 33, .2);
10  box-shadow: 0 5px 15px rgba(33, 33, 33, .2);
11  overflow: hidden;
12  cursor: pointer;
13}
14
15button > span {
16  z-index: 2;
17}
18
19button::before {
20  content: '';
21  position: absolute;
22  top: 0;
23  left: 0;
24  width: 100%;
25  height: 100%;
26  border-radius: 30px;
27  background-color: #212121;
28  z-index: -1;
29  overflow: hidden;
30  -webkit-transform: scaleX(0);
31  -ms-transform: scaleX(0);
32  transform: scaleX(0);
33  -webkit-transform-origin: right;
34  -ms-transform-origin: right;
35  transform-origin: right;
36  -webkit-transition: -webkit-transform 0.2s ease-in;
37  transition: -webkit-transform 0.2s ease-in;
38  transition: transform 0.2s ease-in;
39}
40
41button:hover {
42  color: #e8e8e8;
43}
44
45button:hover::before {
46  -webkit-transform: scaleX(1);
47  -ms-transform: scaleX(1);
48  transform: scaleX(1);
49  -webkit-transform-origin: left;
50  -ms-transform-origin: left;
51  transform-origin: left;
52}