How to create a Ripple Effect on Click the Button ?
Ripple effect is a part of the modern design trend. You have seen it on many websites specially on Google’s material design language. It gives a button pressing effect. We can make a ripple effect by adding and animating a child element to the button. We can also position it according to the position of the cursor on the button using Javascript.
- Basic styling: Add basic styling to the button with a
position:relative
attribute to position the inner span tag andoverflow:hidden
to prevent span going outside of button.<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Button Ripple Effect - GFG
</
title
>
<
style
>
/* Adding styles to button */
.btn {
padding: 12px 50px;
border: none;
border-radius: 5px;
background-color: #1abc9c;
color: #fff;
font-size: 18px;
outline: none;
cursor: pointer;
/* We need this to position
span inside button */
position: relative;
overflow: hidden;
box-shadow: 6px 7px 40px -4px
rgba(0, 0, 0, 0.2);
}
</
style
>
</
head
>
<
body
>
<
button
class
=
"btn"
>
Enter GeeksforGeeks
</
button
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Add styling to the span element: Now adding the style for the span element that will show up on the click of a button.
<style>
.btn span {
position
:
absolute
;
border-radius:
50%
;
/* To make it round */
background-color
: rgba(
0
,
0
,
0
,
0.3
);
width
:
100px
;
height
:
100px
;
margin-top
:
-50px
;
/* for positioning */
margin-left
:
-50px
;
animation: ripple
1
s;
opacity:
0
;
}
/* Add animation */
@keyframes ripple {
from {
opacity:
1
;
transform: scale(
0
);
}
to {
opacity:
0
;
transform: scale(
10
);
}
}
</style>
chevron_rightfilter_none - Adding JavaScript: Now we’ll add the span element on button click with position according to the mouse click. On button click we have to do the following:
- Create
span
element and add ripple class to it. - Get the clicked position of cursor using
event
variable. - Set the position of the span element.
- Remove the span element to avoid spamming of span elements in button.
<script>
const btn = document.querySelector(
".btn"
);
// Listen for click event
btn.onclick =
function
(e) {
// Create span element
let ripple = document.createElement(
"span"
);
// Add ripple class to span
ripple.classList.add(
"ripple"
);
// Add span to the button
this
.appendChild(ripple);
// Get position of X
let x = e.clientX - e.target.offsetLeft;
// Get position of Y
let y = e.clientY - e.target.offsetTop;
// Position the span element
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
// Remove span after 0.3s
setTimeout(() => {
ripple.remove();
}, 300);
};
</script>
chevron_rightfilter_none - Create
The final output will be look something like below: