Hướng dẫn tạo Ripple Effect on Click bằng HTML, CSS và JavaScript

Ripple Effect là gì?

Ripple Effect (hiệu ứng gợn sóng) là hiệu ứng mô phỏng vòng tròn lan tỏa ra từ điểm click. Khi người dùng nhấn vào nút, một vòng tròn nhỏ xuất hiện tại đúng vị trí con trỏ và dần mở rộng ra ngoài trước khi biến mất.

Hiệu ứng này giúp tạo cảm giác tương tác thật hơn và tăng trải nghiệm người dùng.

Ripple Effect hoạt động như thế nào?

Về cơ bản, hiệu ứng ripple hoạt động dựa trên ba bước:

1. Tính toán tọa độ click của người dùng trong phần tử.
2. Tạo một phần tử hình tròn (thẻ span) đặt vào vị trí đó.
3. Áp dụng animation mở rộng và mờ dần cho phần tử ripple rồi xóa nó khỏi DOM.

Nhờ vậy, ripple luôn xuất hiện đúng tâm điểm nơi người dùng nhấn và lan rộng tự nhiên theo độ lớn của nút.

Cấu trúc HTML đơn giản

Một nút bình thường cũng có thể trở thành “ripple button” với một class cố định:

<button class="ripple-btn">Click me</button>

Phần lớn công việc còn lại sẽ được xử lý bởi CSS và JavaScript.

CSS tạo nền hiệu ứng và vòng tròn ripple

CSS dưới đây định nghĩa style của nút và phần tử ripple tạm thời được tạo ra khi click:

.ripple-btn {
    position: relative;
    overflow: hidden;
    padding: 10px 16px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.ripple-btn span.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: ripple-effect 600ms ease-out;
    pointer-events: none;
}

@keyframes ripple-effect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

Lưu ý:

• overflow: hidden để hiệu ứng không tràn khỏi nút.
• opacity giảm dần để ripple biến mất tự nhiên.
• Animation scale mở rộng tạo cảm giác lan tỏa.

JavaScript xử lý vị trí click và tạo hiệu ứng

Đoạn JavaScript bên dưới giúp tạo phần tử ripple mỗi khi người dùng nhấn vào nút:

(function() {
    function createRipple(event) {
        var button = event.currentTarget;

        var circle = document.createElement("span");
        circle.classList.add("ripple");

        var rect = button.getBoundingClientRect();
        var size = Math.max(rect.width, rect.height);
        circle.style.width = circle.style.height = size + "px";

        var x = event.clientX - rect.left - size / 2;
        var y = event.clientY - rect.top - size / 2;

        circle.style.left = x + "px";
        circle.style.top = y + "px";

        button.appendChild(circle);

        setTimeout(function() {
            circle.remove();
        }, 600);
    }

    document.querySelectorAll(".ripple-btn").forEach(function(btn) {
        btn.addEventListener("click", createRipple);
    });
})();

Điểm quan trọng:

• Lấy kích thước lớn nhất của nút để ripple luôn đủ rộng.
• Tính đúng tọa độ click dựa trên clientX / clientY.
• Xóa ripple sau khi animation kết thúc để tránh đầy DOM.

Demo Ripple Effect

Ví dụ dưới đây cho phép người đọc nhấp thử để thấy hiệu ứng ripple ngay lập tức.

Mở rộng Ripple Effect

Sau phiên bản cơ bản, hiệu ứng ripple có thể được mở rộng theo nhiều hướng:

• Thay đổi màu ripple tùy theo màu nền của nút.
• Hiệu ứng lan rộng nhanh hoặc chậm bằng cách chỉnh thời gian animation.
• Ripple gradient hoặc ripple với opacity động.
• Áp dụng cho nhiều loại phần tử khác như thẻ card, ảnh hoặc menu item.

Kết luận

Ripple Effect giúp các nút bấm trở nên sinh động và hiện đại hơn. Chỉ với một chút CSS và JavaScript, hiệu ứng gợn sóng có thể được áp dụng linh hoạt cho hầu hết mọi giao diện web.

Đây là một kỹ thuật UI nhẹ nhàng nhưng mang lại trải nghiệm trực quan rõ rệt, rất phù hợp để nâng cấp tính tương tác của trang web.