Mẹo làm đẹp với Css

<a class="link-1" href="#">Link nhẹ nhàng</a>



/* Cơ bản, bóng nhẹ để tăng độ tương phản */

a.link-1{

  color:#1a73e8;

  text-decoration:none;

  text-shadow: 0 1px 0 rgba(0,0,0,.25);

}



/* Nổi rõ hơn (2 lớp bóng) */

a.link-2{

  color:#222;

  text-decoration:none;

  text-shadow:

    0 1px 0 rgba(255,255,255,.6),   /* viền sáng nhẹ phía trên */

    0 2px 4px rgba(0,0,0,.25);      /* bóng mờ phía dưới */

}



/* Tạo hiệu ứng “viền chữ” dễ đọc trên nền phức tạp */

a.link-3{

  color:#ffffff;

  background:#3b82f6;

  padding:.2em .5em;

  border-radius:.5em;

  text-decoration:none;

  /* nhiều bóng nhỏ xung quanh để giống stroke */

  text-shadow:

    0 1px 0 rgba(0,0,0,.6),

    0 -1px 0 rgba(0,0,0,.6),

    1px 0 0 rgba(0,0,0,.6),

    -1px 0 0 rgba(0,0,0,.6);

}



/* Phát sáng khi hover (đọc vẫn ổn) */

a.link-4{

  color:#10b981;

  text-decoration:none;

  transition: text-shadow .2s ease, color .2s ease;

}

a.link-4:hover{

  color:#0ea371;

  text-shadow:

    0 0 6px rgba(16,185,129,.7),

    0 0 16px rgba(16,185,129,.5);

}