CSS ile Text Link Ornekleri

Bu yazimda sizlerle css kodlari ile mouse on/over halinde text linklerin istediginiz sekilde (alti cizgili, text rengi degisimi, boyutu buyumesi vb.) nasil olacaklarini ornekler ile aciklamaya calisacagim, umarim arayan arkadaslara yardimci olabilirim.

1) Text link uzerine gelince renk degisimi.

Bunun icin uygulamamiz gereken css kodumuz.

a.ornek:link {color: #000000}
a.ornek:visited {color: #0000ff}
a.ornek:hover {color: #ffcc00}


2) Text link uzerine gelince buyuyen font.

Uzerine gelince text linkimizin buyumesini istiyorsak asagidaki kodu uygulamaliyiz dilerseniz font-size kismindan boyut yuzdesini ayarliyabilirsiniz.

a.ornek:link {color: #ff0000}
a.ornek:visited {color: #0000ff}
a.ornek:hover {font-size: 150%}

3) Text link uzerine gelince arka plan renginin degismesi.

Uzerine gelinince arka planimizin rengini degistirmek icin:

a.ornek:link {color: #ff0000}
a.ornek:visited {color: #0000ff}
a.ornek:hover {background: #66ff66}


4) Text Link uzerine gelince alt cizgi cikmasi.

En cok uygulanan text link orneklerinden birisi text link uzerene gelince textimizin altinda cizgi cikmasi icin:

a.ornek:link {color: #ff0000; text-decoration: none}
a.ornek:visited {color: #0000ff; text-decoration: none}
a.ornek:hover {text-decoration: underline}

Yukarida verdigim ornek css text link kodlarinin renklerini siz dilediginiz renk kodu ile degistirebilirsiniz.