One More Special Hover Effect

Kembali lagi menemukan satu yang spesial seputar trik hover effect! Jika berbicara mengenai hover serasa ada terus orang yg berkreasinya ;)) Dari awal menemukan kode-kode baru lalu dikembangkan kemudian dirangkai dengan ini-itu, maka akan terus lahirlah kreasi fullstylish b-)
Artikel asli dengan judul one more fancy hover effect merupakan 2 buah jenis efek hover. Syntax link dengan memakai atribut data-title="" menghasilkan efek serelek hover ke kanan & ke bawah yg begitu lembut seperti kuah kolak pisang :p Coba arahkan kursor kalian

Bazaar PahalaThere's the real truth

.button {
display: block;
height: 3.5em;
width: 11em;
margin: .5em auto;
overflow: hidden;
position: relative;
font: 1.3em Tahoma, Helvetica, Arial, Sans-Serif;
}
.button > span {
top: 0;
left: 0;
width: 0%;
height: 100%;
display: block;
overflow: hidden;
position: absolute;
-webkit-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
text-shadow: 1px 1px 3px #555, -1px -1px 3px #fff, 1px 1px #555, -1px -1px #fff;
}
.button:after, .button > span > span {
display: block;
padding: 1em 0;
text-align: center;
border-radius: 0.6em;
}
.button:after {
content: attr(data-title);
width: 100%;
background: #444;
color: #bbb;
}
.button > span > span {
width: 11em;
background: #999;
color: #666;
}
.button:hover > span {
width: 100%;
}
.button1 > span {
height: 0%;
width: 100%;
}
.button1:hover > span {
height: 100%;
}
.button1:after {
background: #0086b3;
color: #f1f1f1;
}
.button1 > span > span {
background: #d0c3b4;
color: #2f3c4b;
}

Markup HTML<a class="button" data-title="BLAH-BLEH-BLOH" href="#">
<span>
<span>BLAH-BLEH-BLOH</span>
</span>
</a>

<a class="button button1" data-title="BLAH-BLEH-BLOH" href="#">
<span>
<span>BLAH-BLEH-BLOH</span>
</span>
</a>

Sumber: pepsized.com/one-more-fancy-hover-effect
Mungkin banyak trik sejenis, tetapi seperti yg gue bilang di awal, bahwasannya fancy hover menggunakan atribut data-title="" Coba datangi halaman berikut guna melihat infromasi baru apa sih custom data attributes itu. HOW ABOUT THIS...tympanus.net/Development/CreativeButtons @-)