การจัดสไตล์ลิงก์ (Links) ด้วย CSS

CSS อนุญาตให้จัดสไตล์ลิงก์ตามต้องการ สามารถจัดรูปแบบข้อความ เพิ่มสี พื้นหลัง ขนาด และเพิ่มแอนิเมชันเพื่อเอฟเฟกต์ภาพที่น่าสนใจ

ลำดับ pseudo-selectors ที่ถูกต้อง: :link, :visited, :hover, :active (จำได้ว่า LVHA - LoVe HAte)

ตัวอย่างที่ 1: Hover Effect บนลิงก์

<!DOCTYPE html>
<html>
<head>
  <style>
    p { margin: 25px; }
    #mod {
      padding: 10px; color: darkturquoise;
      border: thin solid; background-color: lemonchiffon;
    }
    #mod:hover {
      color: white; box-shadow: 0 0 0 1px black;
      background-color: slateblue;
    }
  </style>
</head>
<body>
  <p> <a href="mailto:user@example.com">Demo link</a> </p>
  <p> <a id="mod" href="mailto:user@example.com">Modified demo link</a> </p>
</body>
</html>

ผลลัพธ์

ปกติ:

Hover ลิงก์ที่ 2:

ตัวอย่างที่ 2: ลิงก์ในปุ่มและลิงก์ธรรมดา

<!DOCTYPE html>
<html>
<head>
  <style>
    div { margin: 25px; display: flex; float: left; border: thin solid; background-color: snow; padding: 20px; }
    body * { border-radius: 5%; }
    #mod { padding: 10px; color: royalblue; text-decoration: none; }
    #mod:hover { box-shadow: 0 0 10px 2px black; text-decoration: overline; font-size: 1.2em; }
  </style>
</head>
<body>
  <div>
    <button><a href="#">Demo</a></button>
    <a id="mod" href="#">Demo</a>
  </div>
</body>
</html>

ผลลัพธ์

ปกติ:

Hover:

Link Pseudo-classes ทั้ง 4 สถานะ

แนวทางปฏิบัติที่ดี

• รักษาความแตกต่างระหว่างลิงก์และข้อความปกติ (underline หรือสีที่ต่างออกไป)
• ให้ :focus style ชัดเจนสำหรับการเข้าถึงด้วยคีย์บอร์ด (Accessibility)
• หลีกเลี่ยงการลบ outline เริ่มต้นโดยไม่ใส่ focus style ใหม่
• ใช้ transition สำหรับ hover effect ที่นุ่มนวล