Efeito Bu

Hello my sweets

Para sua elite de autores ou de afiliados, eu trouxe o efeito Bu, que na verdade não tem nada a ver com o efeito, criado por Josh Hofstadter do BC

Preview

Antes de tudo, cole isto no seu CSS:

.efeitobu { margin: 2px; background: #fff; padding: 2px; border: 2px double #dcdcdc; -webkit-transition-duration: .80s;}
.efeitobu:hover {
-webkit-transition-duration: .80s;
-webkit-animation: cssAnimation 1.504s 17 ease;
-moz-animation: cssAnimation 1.504s 17 ease;
-o-animation: cssAnimation 1.504s 17 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}

Bom, vamos agora editar isso... Mude o "background: #fff;" pela cor da borda branca (no preview). 

Mude "padding" pela grossura da borda branca.

Por fim, troque "border: 2px double #dcdcdc;" pela grossura e cor da borda dupla 

(borda cinzenta no preview).

Agora ponha isso onde quer colocar o efeito:

<a href="LINK" title="TITULO"><img src="URLDAIMAGEM" class="efeitobu"></a>

 Mude apenas o que está em negrito.

Kissi