<a href="#">Efekt button</a>
a {
text-align: center;
cursor: pointer;
zoom: 1;
position: relative;
overflow: hidden;
color: #000;
font-weight: 700;
font-size: 12px;
z-index: 1 -webkit-transform : translateZ(0);
-webkit-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
-moz-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
-ms-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
-o-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
border: 1px solid #000;
padding: 20px;;
}
a:before {
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
transition: width .25s ease-out;
background-color: #000;
}
a:hover:before {
width: 100%;
}
a:hover {
color: #ffffff;
}
Tak o to powinieneś taki efekt uzyskać o jaki Ci chodziło :)