[CSS] Tạo các loại hiệu ứng của link khi rê chuột đến

[LOVESuper PRO]

Như mình đã viết trong cách làm trong box JAVA, đây là theo cách CSS, vô cùng đơn giản.

Demo: http://www.a3k43.net
Bạn chỉ cần thêm thông số như sau trong a:hover
Ví dụ bản gốc là:

Code:

a:hover{
 text-decoration: underline;
 color : #d31141;


Thì bây giờ bạn thêm:

Code:

font-weight:bold;
background-image:url(http://i3.glitter-graphics.org/pub/707/707623ndqm8nohtx.gif);

Sẽ được:

Code:

a:hover{
 text-decoration: underline;
 color : #d31141;
 font-weight:bold;
 background-image:url(http://i3.glitter-graphics.org/pub/707/707623ndqm8nohtx.gif);
 }

Như thế này là thành công ! Bạn cũng có thể thay các loại hình gif kia.

Một số hình gif làm nền hiệu ứng:

<img src="http://i5.glitter-graphics.org/pub/591/591395kecel1r4wj.gif"/> <img src="http://i10.glitter-graphics.org/pub/7/7300hpyshmxute.gif"/> <img src="http://i4.glitter-graphics.org/pub/666/666004tw184km3y7.gif"/> <img src="http://i10.glitter-graphics.org/pub/591/591400hxt8p0qdcj.gif"/> <img src="http://i8.glitter-graphics.org/pub/4/4028x9kn03h8ea.gif"/> <img src="http://i1.glitter-graphics.org/pub/25/25641z48mdznjyh.gif"/> <img src="http://i1.glitter-graphics.org/pub/591/591401hydu3uezt8.gif"/> <img src="http://i4.glitter-graphics.org/pub/93/93234ygoixfay4u.gif"/> <img src="http://i1.glitter-graphics.org/pub/465/465791lnieeghsa0.gif"/> <img src="http://i6.glitter-graphics.org/pub/915/915846n4afambjlc.gif"/> <img src="http://i4.glitter-graphics.org/pub/591/591424r5j5z9vzd4.gif"/> <img src="http://i7.glitter-graphics.org/pub/11/11887jxbx0l4gkj.gif"/> <img src="http://i9.glitter-graphics.org/pub/185/185649d8sylcmsi8.gif"/> <img src="http://i5.glitter-graphics.org/pub/11/11945eycvex646p.gif"/> <img src="http://i1.glitter-graphics.org/pub/707/707861kfj61pqi7p.gif"/> <img src="http://i4.glitter-graphics.org/pub/191/191994rtvgza2v6l.gif"/> <img src="http://i3.glitter-graphics.org/pub/707/707623ndqm8nohtx.gif"/> <img src="http://i6.glitter-graphics.org/pub/762/762836k463new063.gif"/> <img src="http://i10.glitter-graphics.org/pub/16/16770gwdi5yck9n.gif"/> <img src="http://i2.glitter-graphics.org/pub/738/738402o80b3k1cyj.gif"/> <img src="http://i7.glitter-graphics.org/pub/478/478587wx5pxt1vlk.gif"/> <img src="http://i10.glitter-graphics.org/pub/707/707620lbi5rc3g3f.gif"/> <img src="http://i7.glitter-graphics.org/pub/707/707627j14ckqnn99.gif"/> <img src="http://i8.glitter-graphics.org/pub/52/52628h2ryzl513s.gif"/> <img src="http://i10.glitter-graphics.org/pub/629/629740trq6seguwh.gif"/> <img src="http://i10.glitter-graphics.org/pub/157/157450y8o7027lgr.gif"/> <img src="http://i10.glitter-graphics.org/pub/421/421370e6hskwcxto.gif"/> <img src="http://i8.glitter-graphics.org/pub/707/707618jyfmp3jbxr.gif"/> <img src="http://i5.glitter-graphics.org/pub/605/605005pfdwmz2652.gif"/> <img src="http://i3.glitter-graphics.org/pub/707/707863eox8fka2h6.gif"/> <img src="http://i10.glitter-graphics.org/pub/705/705840cqca0enued.gif"/> <img src="http://i3.glitter-graphics.org/pub/11/11853a6q64563zb.gif"/> <img src="http://i6.glitter-graphics.org/pub/726/726886lesn1cznkg.gif"/> <img src="http://i8.glitter-graphics.org/pub/657/657158iqtx2ivn81.gif"/> <img src="http://i8.glitter-graphics.org/pub/219/219798iztk71ohtu.gif"/> <img src="http://i2.glitter-graphics.org/pub/804/804832d8f704vlk6.gif"/> <img src="http://i2.glitter-graphics.org/pub/655/655632omyi0avqnc.gif"/> <img src="http://i1.glitter-graphics.org/pub/76/76961leorfcwp4u.gif"/> <img src="http://i3.glitter-graphics.org/pub/301/301693a9s1sl12sm.gif"/> <img src="http://i7.glitter-graphics.org/pub/579/579317x3nzfxfqx9.gif"/> <img src="http://i4.glitter-graphics.org/pub/804/804854q3rlitczwb.gif"/> <img src="http://i9.glitter-graphics.org/pub/721/721369nrxraya324.gif"/> <img src="http://i5.glitter-graphics.org/pub/11/11885e13o0o1a5v.gif"/> <img src="http://i6.glitter-graphics.org/pub/14/14396wjx6fk9kuw.gif"/> <img src="http://i1.glitter-graphics.org/pub/724/724501t0d3iavtpm.gif"/> <img src="http://i6.glitter-graphics.org/pub/820/820276tj96wl590n.gif"/> <img src="http://i8.glitter-graphics.org/pub/655/655328pzbfenjsk7.gif"/> <img src="http://i1.glitter-graphics.org/pub/724/724501t0d3iavtpm.gif"/> <img src="http://i3.glitter-graphics.org/pub/715/715333mjcar13uxg.gif"/> <img src="http://i7.glitter-graphics.org/pub/917/917227cialgi47lj.gif"/> <img src="http://i8.glitter-graphics.org/pub/16/16778jktza71y3u.gif"/> <img src="http://i1.glitter-graphics.org/pub/947/947631s72vei3pzh.gif"/> <img src="http://i8.glitter-graphics.org/pub/761/761208civf7vumcn.gif"/> <img src="http://i8.glitter-graphics.org/pub/872/872428ph1how4907.gif"/>