Các trạng thái của liên kết, tạo nút liên kết bằng CSS

Các trạng thái của liên kết

Một liên kết sẽ luôn có bốn trạng thái:

• Trạng thái link – nếu người dùng chưa từng viếng thăm địa chỉ trang web của liên kết này
• Trạng thái visited – nếu người dùng đã từng viếng thăm địa chỉ trang web của liên kết này
• Trạng thái hover – khi người dùng dí con chuột vào liên kết
• Trạng thái active – khi người dùng nhấn con chuột vào liên kết

Ta có thể định dạng cho liên kết dựa theo trạng thái của nó.

Lưu ý: Khi ta định dạng cho liên kết theo trạng thái, thì các trạng thái phải được sắp xếp theo đúng thứ tự từ trên xuống dưới là: link, visited, hover, active

Tạo nút liên kết (Link Button)

Chúng ta có thể sử dụng các thuộc tính đã học như: background-color, color, margin, padding, border,.... kết hợp với các trạng thái của liên kết để tạo ra liên kết có hình dạng giống như một cái nút.

NÚT THỨ NHẤT NÚT THỨ HAI NÚT THỨ BA

.lienket{       
    background-color: white;
    color: black;
    border: 2px solid #73AD21;
    border-radius:5px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-family: "Lucida Sans Unicode";
}
.lienket:hover{
    background-color: #73AD21;
    color:white;
}
.lienket:active{
    background-color: green;
    border-color: green;
}