button{
position: relative;
overflow: hidden;
outline: none;
cursor: pointer;
display: block;
text-align: center;
border: 2px solid #ac0707;
letter-spacing: .2em;
padding: 1em 2em 1em 2.2em;
color: #FFF;
background-color: transparent;
font-family: sans-serif;
font-weight: 700;
font-size: 18px;
text-transform: uppercase;
line-height: 1;
transition: all .3s ease;
}
button:focus,
button:hover{
color: #000;
}
button:after{
content: "";
display: block;
min-width: 200%;
min-height: 500%;
border-radius: 50%;
background-color: #000;
border: 100px solid #ac0707;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .3s ease;
}
button:focus:after,
button:hover:after{
min-height: 0;
min-width: 0;
}