15.button-ripple-effect

<title>Enhanced Button Ripple Effect</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f4f8;

font-family: Arial, sans-serif;

}

.button-container {

display: flex;

flex-direction: column;

align-items: center;

}

.ripple-effect {

position: relative;

padding: 15px 35px;

display: inline-block;

margin: 10px;

font-size: 18px;

letter-spacing: 2px;

border-radius: 50px;

cursor: pointer;

overflow: hidden;

color: #fff;

font-weight: bold;

border: none;

outline: none;

transition: transform 0.2s, box-shadow 0.2s;

}

.ripple-effect:hover {

transform: translateY(-2px);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

.ripple-effect:active {

transform: translateY(1px);

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.ripple-effect.primary {

background: linear-gradient(90deg, #4a90e2, #5cb3ff);

}

.ripple-effect.secondary {

background: linear-gradient(90deg, #34d399, #10b981);

}

.ripple-effect > span {

position: absolute;

background-color: rgba(255, 255, 255, 0.7);

transform: translate(-50%, -50%);

pointer-events: none;

border-radius: 50%;

animation: rippleEffectAnimation 0.6s linear;

}

@keyframes rippleEffectAnimation {

0% {

width: 0;

height: 0;

opacity: 0.5;

}

100% {

width: 500px;

height: 500px;

opacity: 0;

}

@media (max-width: 600px) {

.ripple-effect {

font-size: 16px;

padding: 12px 25px;

}

</style>

</head>

<body>

<button class="ripple-effect primary">Primary Button</button>

<button class="ripple-effect secondary">Secondary Button</button>

</div>

const getAllButtons = document.querySelectorAll(".ripple-effect");

getAllButtons.forEach((btn) => {

btn.addEventListener("click", createRipple);

});

function createRipple(event) {

const button = event.currentTarget;

const circle = document.createElement("span");

const diameter = Math.max(button.clientWidth, button.clientHeight);

const radius = diameter / 2;

circle.style.width = circle.style.height = `${diameter}px`;

circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;

circle.style.top = `${event.clientY - button.offsetTop - radius}px`;

const ripple = button.getElementsByClassName("ripple")[0];

if (ripple) {

ripple.remove();

}

button.appendChild(circle);

// Trigger button's native click event

button.click();

}

// Keyboard accessibility

getAllButtons.forEach((btn) => {

btn.addEventListener("keydown", (event) => {

if (event.key === "Enter" || event.key === " ") {

event.preventDefault();

const rect = btn.getBoundingClientRect();

const fakeEvent = {

clientX: rect.left + rect.width / 2,

clientY: rect.top + rect.height / 2,

currentTarget: btn

};

createRipple(fakeEvent);

}

});

</script>

</body>

</html>