Các Trạng Thái Của Liên Kết, Tạo Nút Liên Kết Bằng CSS

Trang chủ » Cách Css Button » Các Trạng Thái Của Liên Kết, Tạo Nút Liên Kết Bằng CSS

Có thể bạn quan tâm

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ó.

Ví dụ: Nếu bạn chưa từng vào fanpage https://www.facebook.com/webcoban.vn thì liên kết sẽ có (MÀU ĐEN) Nếu bạn đã từng vào fanpage https://www.facebook.com/webcoban.vn thì liên kết sẽ có (MÀU ĐỎ) Khi dí chuột vào liên kết này thì nó sẽ có (MÀU XANH) Khi nhấn chuột vào liên kết này thì nó sẽ có (MÀU VÀNG) Xem ví dụ

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

Ví dụ:

Dưới đây là đoạn CSS định dạng liên kết giống cái nút thứ nhất

.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; } Xem ví dụ

Từ khóa » Cách Css Button