Một số cách tạo Effect cho Text Link với CSS

1. Sử dụng background-clip: text

• Lưu ý nhỏ: Thuộc tính background-clip: text là một tính năng thử nghiệm và nó hỗ trợ cho Internet Explorer 11 trở lên.
• Đầu tiên, ta sẽ tạo một tag a cơ bản:

<a href="#">Click here</a>

• Tiếp đó, ta bắt đầu thêm css vào thẻ trên.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: red
  overflow: hidden;
}

• Ta sử dụng overflow: hidden - nó có tác dụng cắt bất kỳ nội dung nào bên ngoài thẻ a trong quá trình di chuột

a {
  background: linear-gradient(to right, red, blue 50%, red 50%);
}

• Chúng ta sẽ cần sử dụng một linear-gradient với mức dừng ở mức 50% so với màu bắt đầu, khi đó Link Text cũng như màu của nó sẽ thay đổi theo.
• Tiếp theo, ta sử dụng background-clip để cắt gradient và giá trị text. Sử dụng thuộc tính background-size và background-position để init màu khi text xuất hiện.

a {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

• Cuối cùng, ta sẽ thêm thuộc tính transition và :hovervào cho thẻ a. Để có thể fill link từ trái qua phải khi hover , ta sử dụng thuộc tính background-position:

a {
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

• Kết quả:

• Lưu ý: Đối với các kiểu văn bản chẳng hạn như underline với thuộc tính text-decoration sẽ không hoạt động.

---

2. Sử dụng width/height

• Cách này sử dụng data attribute chứa text trong thẻ avới cách setting with(fill text từ trái sang phải hoặc phải sang trái) hoặc height(fill text từ trên xuống dưới hoặc từ dưới lên trên), từ 0% đến 100% khi hover.

<a href="#" data-content="Click Here">Click Here</a>

• Css phần này tương tự như cách trước chỉ có khác là mình thêm thuộc tính text-decoration vào:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: red;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

• Khi ta cần sử dụng nội dung từ thuộc tính data-content. Nó sẽ được định vị phía trên nội dung trong thẻ a. Ta có thể sử dụng một mẹo nhỏ để sao chép văn bản trong thuộc tính data đó và hiển thị nó thông qua hàm attr() trên thuộc tính nội dung của element ::before:

a::before {
  position: absolute;
  content: attr(data-content); /* Prints the value of the attribute */
  top: 0;
  left: 0;
  color: blue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

• Để giữ cho văn bản từ wrap đến dòng tiếp theo, ta sẽ dùng white-space: nowrap. Để thay đổi màu liên kết, ta sẽ set value cho thuộc tính color , sử dụng ::before với with bắt đầu từ 0:

a::before {
  width: 0;
  white-space: nowrap;
}

• Tăng width lên 100% cho ::before để hoàn thành hiệu ứng văn bản khi hover:

a:hover::before {
  width: 100%;
}

• Kết quả:

---

3. Sử dụng clip-path

• Đối với cách này, ta sẽ sử dụng thuộc tính clip-path với shape là polygon. polygon này sẽ có bốn đỉnh, với hai trong số chúng sẽ mở rộng sang phải khi hover

<a href="#" data-content="Click Here">Click Here</a>

• Cách này cũng sẽ giống với cách làm width/height trước đó, chỉ có khác là mình sẽ thêm clip-path vào css:

a::before {
  position: absolute;
  content: attr(data-content);
  color: black;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
  transition: clip-path 275ms ease;
}

• Bây giờ, ta sẽ xét xem dòng này nói lên điều gì nhé

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

• Các đỉnh polygon của thuộc tính clip-path được đặt theo tỷ lệ phần trăm để xác định tọa độ theo thứ tự được viết:

0 0 = top left
0 0 = top right
100% 0 = bottom right
0 100% = bottom left

''''

• Hướng của hiệu ứng fill color có thể được thay đổi bằng cách sửa đổi tọa độ. Cuối cùng để có thể hoạt động được khi chúng ta hover thì ta cần thêm:

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

• Kết quả:

---

4. Sử dụng transform

• Đến với cách này, ta sẽ sử dụng cách masking method với thẻ span. Ở đây, ta sẽ dùng `aria-hidden="true" và sẽ viết như sau:

<a href="#"><span data-content="Click Here" aria-hidden="true"></span>Click Here</a>

• Thẻ <span> chứa một quá trình chuyển đổi sẽ bắt đầu từ bên trái:

span {
  position: absolute;
  top: 10;
  left: 5;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

• Tiếp theo, để <span> có thể trượt qua bên phải, ta sẽ sử dụng hàm translateX() và truyền vào nó giá trị 0

  a:hover span {
     transform: translateX(0);
  }

• Và ta sẽ sử dụng ::before với thẻ span

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

• Cuối cùng, để có thể có hiệu ứng ta cần thêm css cho ::before của span khi hover là xong:

a:hover span::before {
  transform: translateX(0);
}

• Kết quả:

  ---

- Cảm ơn các bạn đã đọc bài viết của mình!

- Tài liệu tham khảo: CSS TRICK