button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
border: 2px solid #ff6700;
background-color: transparent;
color: #ff6700;
padding: 1em 1.75em;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: .3em;
text-transform: uppercase;
transition: all .3s ease;
}
button:focus,
button:hover{
color: #ff9e00;
background-color: rgba(255, 103, 0, 0.31);
}
button:before,
button:after{
content: "";
position: absolute;
z-index: -1;
width: 1em;
height: 1em;
transition: all .3s ease;
}
button:before{
top: -7px;
left: -7px;
border-top: 2px solid #ff6700;
border-left: 2px solid #ff6700;
}
button:after{
right: -7px;
bottom: -7px;
border-bottom: 2px solid #ff6700;
border-right: 2px solid #ff6700;
}
button:hover:before,
button:focus:before{
top: -12px;
left: -12px;
}
button:hover:after,
button:focus:after{
right: -12px;
bottom: -12px;
}