Bir HTML bağlantısı ziyaret edilmiş, ziyaret edilmemiş veya aktif olmasına bağlı olarak farklı bir renkte görüntülenir.
HTML Link Renkleri
Varsayılan olarak şu şekilde bir bağlantı görünecektir (tüm tarayıcılarda):
- Ziyaret edilmemiş bir bağlantının altı çizili ve mavi renktedir
- Ziyaret edilen bir bağlantının altı çizili ve mor renktedir
- Etkin bir bağlantının altı çizili ve kırmızıdır
Bağlantı renklerini CSS kullanarak değiştirebilirsiniz:
Aşağıdaki örnekte ziyaret edilmemiş bir bağlantı, altı çizili olmadan yeşil renkte olacaktır. Ziyaret edilen bir bağlantı, altı çizili olmadan pembe renkte olacaktır. Etkin bir bağlantı sarı renkte ve altı çizili olacaktır. Ayrıca, bir bağlantının üzerine fareyle gelindiğinde (a:hover) bağlantı kırmızı renkte olacak ve altı çizili olacaktır:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Renkleri</h2>
<a href="index.html" target="_blank">HTML Link Renkleri</a>
</body>
</html>
Buton Linkleri
Bir link CSS ile buton olarak da tanımlanabilir.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="index.html" target="_blank">Bu Bir Linktir</a>
</body>
</html>
