.button {
display: inline-block;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
line-height: 48px;
white-space: nowrap;
height: 48px;
text-align: center;
margin: 0;
padding: 0 30px;
color: #fff;
background: #555;
transition: all 300ms ease 0s;
text-decoration: none;
position: relative;
cursor: pointer;
z-index: 10;
border: 0;
outline: 0;
overflow: hidden;
border-radius: 24px;
}

a.button {
text-decoration: none;
}

.button:hover {
transition: all 300ms ease 0s;
overflow: hidden;
color: #fff;
}

.button::before {
display: block;
width: 0px;
height: 48px;
content: "";
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
transition: all 300ms ease 0s;
opacity: 0;
z-index: -1;
overflow: hidden;
}

.button:hover::before {
width: 100%;
transition: all 300ms ease 0s;
opacity: 1;
overflow: hidden;
}

.button-grande {
font-weight: 400;
font-size: 18px;
border-radius: 30px;
background: #f18700;
}

.button-grande,
.button-grande::before {
height: 60px;
line-height: 60px;
}

.button-grande::before {
left: 50%;
top: 0;
transform: translate(-50%, 0);
}