When web developers create user interfaces, they often use CSS and JavaScript to add special effects. One popular effect is the ripple button effect, which gives buttons a modern and sleek look with dynamic animation. This article will show you how to create a ripple button effect using HTML, CSS, and JavaScript.
Today in this blog you’ll learn how to create Button Ripple Effect in HTML CSS & JavaScript.
Before we dive into the code, it’s important to understand the concept behind the ripple button effect. This effect mimics the animation of ripples on the surface of water, where a small disturbance creates a ripple that gradually fades away. Similarly, when a user clicks on a button with this effect, a ripple-like animation will appear at the point of the click and then gradually fade away, creating a visually appealing interaction.
Create Button Ripple Effect in HTML CSS & JavaScript
Create a Folder: Start by creating a folder for your project. You can name it anything you like. Inside this folder, you’ll need to create the following files:
- index.html (for the structure of your Ripple Effect Button)
- style.css (for styling the Ripple Effect Button)
Create the HTML File:
- Name your HTML file index.html.
Create the CSS File:
- Name your CSS file style.css.
Create the JavaScript File:
- Name your JavaScript file script.js.
So, let’s get started with the code. First, we need to create a HTML structure for our button.
<!DOCTYPE html>
<!-- NotArena || www.NotArena.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Ripple Effect</title>
<link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-57871047-3fc0-4fed-83a0-fc0ee2757ab5: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.rll-youtube-player .play{--wpr-bg-45db0cff-a4a3-4fe7-a500-20bd104afe8b: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-57871047-3fc0-4fed-83a0-fc0ee2757ab5: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"57871047-3fc0-4fed-83a0-fc0ee2757ab5","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-45db0cff-a4a3-4fe7-a500-20bd104afe8b: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"45db0cff-a4a3-4fe7-a500-20bd104afe8b","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="container">
<button class="ripple-button">Click Me</button>
</div>
<script src="script.js" defer></script>
</body>
</html>
Second, we will add some CSS properties to give our button a basic styling. We can add a background colour, border, and padding to give it a solid colour and shape. We can also add a “transition“ property to make the animation smooth and gradual. Now comes the fun part – adding the ripple effect.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e7e7e7;
font-family: Arial, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
animation: ripple-animation 0.6s linear;
transform: scale(0);
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
.ripple-button {
position: relative;
padding: 15px 40px;
font-size: 18px;
color: white;
background-color: #8400cb;
border: none;
border-radius: 100px;
outline: none;
cursor: pointer;
overflow: hidden;
transition: background-color 0.3s ease;
}
.ripple-button:hover {
background-color: #8400cb;
}
.ripple-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
@media (max-width: 768px) {
.ripple-button {
font-size: 16px;
padding: 12px 30px;
}
}
Now that we have created the basic structure and animation, we can add a JavaScript event listener to trigger the ripple effect when the button is clicked. We can achieve this by selecting the button element and adding an event listener for the “click“ event. Within the event handler, we will add a class to the button element, which will trigger the CSS animation.
document.querySelector('.ripple-button').addEventListener('click', function(e) {
const button = e.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 = `${e.clientX - button.offsetLeft - radius}px`;
circle.style.top = `${e.clientY - button.offsetTop - radius}px`;
circle.classList.add('ripple');
const ripple = button.getElementsByClassName('ripple')[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
});
That’s all, now you’ve successfully created a Ripple Button Effect in HTML CSS & JavaScript. the ripple button effect is a simple yet effective way to add a touch of interactivity to your web design. It’s a great way to make your buttons stand out and provide a more engaging experience for users. With the combination of HTML, CSS, and JavaScript, you can easily implement this effect into your projects and take your UI design to the next level.
If the code doesn’t work or if you run into any issues, please leave a comment below or reach out to us through the contact page.
