Cách tạo hiệu ứng tuyệt vời với biến CSS (CSS Variable)

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.

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 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!

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

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.

Đừ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à.

3. Sử dụng tọa độ để follow con chuột

4. Á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.

Và đây là kết quả sau khi tạo hiệu ứng với biến CSS.

Nó 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 tuyệt vời bằng biến CSS cho trang web của bạn ngay thôi.

Tobias Reich