Efecto barrer

Código html

<a class="efectobarrer"> <span class="hover"></span> <span>ver</span> </a>

Código Css

. efectobarrer { overflow:hidden; position:relative; display:block; width:166px; height:38px; margin:auto; line-height:40px; border:1px solid #4c4c4d; color:#4c4c4d; text-align:center; text-decoration:none; text-transform:uppercase; font-size:14px; font-family:oswald; }

.efectobarrer span { position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; }

.efectobarrer:hover span { color:#fff; }

.efectobarrer .hover { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#4c4c4d; border:1px solid transparent; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; }

. efectobarrer:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); }