/* CSS for button ripple effect */
.btn {
position: relative;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 20px;
cursor: pointer;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
overflow: hidden;
}
.btn::after {
content: “”;
position: absolute;
background: #87ceeb;
width: 100px;
height: 100px;
border-radius: 50%;
transform: scale(0);
animation: ripple 0.7s linear;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
Master the Art of Button Ripple Magic in JavaScript and CSS!
Buttons are one of the most common elements in web design, and adding magical ripple effects can make them even more appealing to the eyes of users. In this article, we will learn how to create a mesmerizing ripple effect for buttons using JavaScript and CSS.
// JavaScript for creating ripple effect
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`;
circle.classList.add(“ripple”);
const ripple = button.getElementsByClassName(“ripple”)[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
}
#codebykd #button #ripple #css
