Linhas hover #1
Previews
Efeito 1
css:
.linha{border-bottom:1px solid #eee ;line-height:20px;color:#88896d;font-size:9px;font-family:pf arma five;letter-spacing:1px;padding:2px;} .linha:hover{margin-left:;-webkit-transition-duration: .90s;border-bottom:0px #eee;background-color:#ff90a1; color:#fff;-webkit-transition: all 0.5s ease-in-out;box-shadow: inset 0px -12px #ff4d67, inset 0px 15px #ff7084;}
Onde quer que apareça:
<div class="linha"><a href="">Esse é o efeito</a></div> <div class="linha"><a href="">pode ser com link ou sem</a></div> <div class="linha"><a href="">Se usar credite</a></div> <div class="linha"><a href="">Não vale plagiar</a></div> <div class="linha"><a href="">Nem roubar , ouviu?</a></div>
Efeito 2
css:
.linha2{border-bottom:1px solid #eee ;line-height:20px;color:#88896d;font-size:9px;font-family:pf arma five;letter-spacing:1px;padding:2px;} .linha2:hover{margin-left:;-webkit-transition-duration: .90s;border-bottom:0px #eee;background-color:#ff90a1; color:#fff;-webkit-transition: all 0.5s ease-in-out;box-shadow: inset -60px 0px #ff4d67, inset 0px 15px #ff7084;}
Onde quer que apareça:
<div class="linha2"><a href="">Esse é o efeito</a></div> <div class="linha2"><a href="">pode ser com link ou sem</a></div> <div class="linha2"><a href="">Se usar credite</a></div> <div class="linha2"><a href="">Não vale plagiar</a></div> <div class="linha2"><a href="">Nem roubar , ouviu?</a></div>
Efeito 3
css:
.linha3{border-bottom:1px solid #eee ;line-height:20px;color:#88896d;font-size:9px;font-family:pf arma five;letter-spacing:1px;padding:2px;} .linha3:hover{margin-left:;-webkit-transition-duration: .90s;border-bottom:0px #eee;background-color:#ff90a1; color:#fff;-webkit-transition: all 0.5s ease-in-out;box-shadow: inset 300px 0px #ff4d67, inset -70px 0px #ff7084;}
Onde quer que apareça:
<div class="linha3"><a href="">Esse é o efeito</a></div> <div class="linha3"><a href="">pode ser com link ou sem</a></div> <div class="linha3"><a href="">Se usar credite</a></div> <div class="linha3"><a href="">Não vale plagiar</a></div> <div class="linha3"><a href="">Nem roubar , ouviu?</a></div>
Se for uti de like! /Gaby
