CSS Холбоос

HTML-ийн <a> холбоос tag нь хэрэглэгчийн үйлдэл дээр үндэслэн 4 төрлийн псевдо-класс (pseudo-class) төлөвтэй байдаг:

a:link — анхны, зочилж үзээгүй холбоос.
a:visited — хэрэглэгчийн урьд нь зочилсон холбоос.
a:hover — хулгана холбоос дээгүүр ирэх үеийн төлөв.
a:active — хулганы даралт хийгдэж буй агшин.

Эдгээрийг ашиглан холбоосыг товчлуур (button) хэлбэртэй болгож болно.

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
a.btn {
    background-color: #2563eb;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
}
a.btn:hover {
    background-color: #1d4ed8; /* Хулгана очиход бараан цэнхэр болно */
}
</style>
</head>
<body>
<a class="btn" href="#">Товчлуур хэлбэртэй холбоос</a>
</body>
</html>

Туршиж үзэх »