Tạo hiệu ứng di chuột (hover) thú vị bằng CSS

Trong thiết kế website hay lập trình website thì việc thiết kế làm thế nào để thu hút người dùng bấm vào các nút (button) điều hướng là rất quan trọng.


Hôm nay mình sẽ hướng dẫn bạn tạo hiệu ứng rê chuột (hover css) thú vị trong CSS với 3 bước:

 

1. Xác định vị trí con chuột

2. Kích hoạt Gradient

3. Kết quả đạt được sau khi tạo hiệu ứng rê chuột bằng css

Hiệu ứng rê chuột trong CSS

Người dùng có bấm thì việc giữ người dùng trên trang mới được lâu hơn và kéo theo tỷ lệ chuyển đổi sẽ cao hơn.
 

• Xem thêm: Dễ dàng Responsive bằng cách sử dụng Css Variables

Theo nghiên cứu thì con người sẽ dễ dàng bị tác động khi cảm xúc đang dâng cao.
 

Vậy, hãy làm cho họ thấy thích thú. Nâng cảm xúc, năng lượng của họ lên để có được tỷ lệ chuyển đổi cao.
 

Hãy cùng bắt đầu với các button, bạn có muốn bấm vào button dưới đây?

 

Làm thế nào bạn làm được tương tự để cho trang web của bạn nổi bật như? Nó không khó như bạn nghĩ đâu!

 

1. Hãy bắt đầu với việc xác định vị trí của con trỏ chuột

Đầu tiên việc chúng ta cần làm là theo dõi vị trí con chuột:

 

document.querySelector('.button').onmousemove = (e) => {

  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
 
}

1. Chọn phần tử và đợi cho đến khi người dùng di chuột qua nó
2. Tính vị trí tương đối với phần tử
3. Lưu các tọa độ trong các biến CSS

Vâng, chỉ có 9 dòng code để cho CSS của bạn định vị con chuột của người dùng. Số lượng hiệu ứng bạn có thể đạt được với thông tin này là rất lớn. Nhưng chúng ta hãy hoàn thành CSS đầu tiên ...

 

2. Kích hoạt gradient

Bây giờ chúng ta có tọa độ được lưu trữ trong các biến CSS và chúng ta có thể sử dụng chúng ở khắp mọi nơi trong CSS của chúng ta.

 

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;

    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}

1. Bao quanh đoạn văn bản bằng 1 khoảng để tránh gardient xuất hiện bên trên nó.
2. Bắt đầu với width và height là 0px và tăng đến 400px khi người dùng di chuột qua button.
3. Đừng quên thiết lập transition: width .2s ease, height .2s ease; để cho nó xuất hiện thật mượt mà.
4. Sử dụng tọa độ để follow con chuột
5. Áp dụng một radial-gradient vào nền và sử dụng giá trị circle (hiệu ứng gradient tròn). Closest-side để lấp đầy before mà không vượt qua nó.

Hãy tự tay thử nghiệm và thay đổi các giá trị để hiểu tại sao nó hoạt động.

 

3. Và đây là kết quả sau khi tạo hiệu ứng rê chuột trong CSS.

Hiệu ứng rê chuột này cũng không quá khó phải không nào. Bạn có thể thay đổi gradient để phù hợp với màu sắc trang web của mình.
 

Quan trọng là bạn nắm được hiệu ứng. Đặt nó vào đâu để làm người dùng thích thú là việc của bạn. Hãy tạo hiệu ứng rê chuột trong CSS tuyệt vời với biến CSS cho trang web của bạn ngay bây giờ nào.


> Đừng quên, tất cả những kiến thức này cũng sẽ dược dạy trong khóa học LẬP TRÌNH PHP hoặc LẬP TRÌNH JAVA WEB tại NIIT - ICT Hà Nội.
 

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI