CSS Button | Hover Animation

<style>
@media (max-width: 480px)
.entry-footer a {
font-size: 10px;
}

body, input, button, select, textarea {
font-family: "Lato",sans-serif;
}

@media (max-width: 767px)
.entry-footer a {
font-size: 11px;
}

body {
font-style: normal;
font-weight: 400;
/* color: hsl(0,0%,25%); */
background-color: #f3f3f3;
}

.entry-footer a:hover {

border-color: rgba(0,0,0,0.25);

background-color: #fff;
}

.entry-footer a:active {

border-color: rgba(0,0,0,0.25);

background-color: rgba(0,0,0,0.075);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.225), 0 1px 1px rgba(255,255,255,0.95);
}

.entry-footer a {
display: inline-block;
float: left;
position: relative;
margin: 0.615em 0.615em 0 0;

border: 1px solid rgba(0,0,0,0.125);
padding: 0.692em 1.154em 0.769em;
cursor: pointer;
font-size: 13px;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
vertical-align: middle;

color: rgba(0,0,0,0.375);
background-color: transparent;
border-radius: 0.35em;
box-shadow: inset 0 0 0 transparent, 0 1px 1px rgba(255,255,255,0.95);
-webkit-transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
}

a {
text-decoration: none;
}

</style>

<div class="entry-footer">
<a href="fdfd">Start</a>
</div>