Create an HTML File (index.html) and use this code for Ripple Effect Button.
<!DOCTYPE html>
<html>
<head>
<title>CSS Ripple Effect</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 100%;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.box button{
width: 300px;
padding: 20px 30px;
border-radius: 10px;
border: none;
outline: none;
position: relative;
background-color: black;
color:white;
box-shadow: 0px 0px 10px gray;
overflow: hidden;
}
.box button:before{
content: "";
padding: 150px;
position: absolute;
left: calc(100% * var(--ripple-x));
top: calc(100% * var(--ripple-y));
transform: translate(-50%, -50%);
background-image: radial-gradient(blue 6%, lightblue 15%, skyblue 60%);
border-radius: 50%;
opacity: 0;
transition: 1.5s;
}
.box button:active::before{
opacity: 1;
transition: 0s;
transform: translate(-50%, -50%) scale(0);
}
</style>
</head>
<body>
<div class="box">
<button>B-Link</button>
</div>
<script>
var root = document.documentElement;
document.addEventListener('mousedown', ev=>{
var el = ev.target;
var x = (ev.clientX - el.offsetLeft) / el.offsetWidth;
var y = (ev.clientY - el.offsetTop) / el.offsetHeight;
root.style.setProperty('--ripple-x', x);
root.style.setProperty('--ripple-y', y);
})
</script>
</body>
</html>The HTML code creates a basic button element.
The CSS code styles the button and creates a pseudo-element that will be used to create the ripple effect. The :before selector styles the pseudo-element, which is positioned absolutely and set to fill the entire button. The background-image property creates a radial gradient that starts with blue 6%, lightblue 15% and skyblue 60% circle at the center of the button and gradually fades to transparent. The transform property scales the circle to a size of 10 times the button’s size and sets its opacity to 0. The transition property sets the duration of the animation for the transform and opacity properties.
The :active:before selector styles the pseudo-element when the button is clicked. The transform property scales the circle to a size of 0, effectively making it disappear, and sets its opacity to 1. The transition property sets the duration of the animation to 0 seconds, so that the circle disappears immediately.
The JavaScript code adds an event listener to the button that listens for a “mousedown” event. When the button is clicked, the event listener change the value of left and top properties of the :before pseudo-element are set to the X and Y coordinates of the click event relative to the button.
That’s it! With this code, you should be able to create a button with a ripple effect using HTML, CSS, and JavaScript.
