CSS ile, linkler farklı şekillerde şekillendirilebilir.CSS'de linkler, herhangi bir CSS özelliğiyle (ör. color, font-family, background vb.) biçimlendirilebilir.

a {
color: red;
}

Ek olarak, hangi durumda olduklarına bağlı olarak linkler farklı şekilde şekillendirilebilir. 4 farklı link durumu vardır :

  • a:link - normal, ziyaret edilmemiş bir link
  • a:visited- kullanıcının ziyaret ettiği link
  • a:hover - kullanıcının fareyle üzerine geldiğinde bir link
  • a:active - tıklandığı anda bir link.
/* ziyaret edilmemiş link */
a:link {
color: red;
}
 
/* ziyaret edilmiş link */
a:visited {
color: green;
}
 
/* fare üstüne gelinmiş link */
a:hover {
color: hotpink;
}
 
/* tıklanılmış link */
a:active {
color: blue;
}

Linkler : text-decoration 

CSS'de "text-decoration" özelliği çoğunlukla linklerde alt çizgileri kaldırmak için kullanılır:

a:link {
text-decoration: none;
}
 
a:visited {
text-decoration: none;
}
 
a:hover {
text-decoration: underline;
}
 
a:active {
text-decoration: underline;
}

Linkler : background-color 

CSS'de "background-color" özelliği, linkler için bir arka plan rengi belirtmek için kullanılabilir:

a:link {
background-color: yellow;
}
 
a:visited {
background-color: cyan;
}
 
a:hover {
background-color: lightgreen;
}
 
a:active {
background-color: hotpink;
}

CSS Buton Yapımı

Linklerin kullanım amacı sayfalar arasında bağlantı sağlamaktır ve genellikle bir buton şeklinde kullanılır. Aşağıdaki örnekte "CSS Nasıl Buton Yapılır ?" sorusuna cevap veren bir örnek bulunmaktadır.

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
 
a:hover, a:active {
background-color: red;
}