How we can create a ripple click effect like an android lollipop using HTML CSS JS? Solution: See this JavaScript CSS Ripple Effect Button Like Android, Button Click Effect.
Previously I have shared many button related programs, but this is a button click effect which is like the Android L ripple effect. Basically, the ripple effect is a situation in which, like ripples expanding across the water when an object is dropped into it. And the first time it introduced with the Android 5.0 Lollipop version. In the same way when you will click on the button, then the click effect will expand like that.
Today you will learn to create Button Click Effect like android lollipop material design. Basically, there are 4 buttons with different colors but all have the same effect. 4 Buttons for showing how the effect looks like in different colors. The best fact of these buttons is where you will click on the button, the effect will start from there.
So, Today I am sharing JavaScript CSS Ripple Effect Button Like Android. For creating this program I have used JavaScript and CSS, there JS is to detect the click place and start the animation from there. This program will best practice or tutorial for the guys who are a beginner in web development. You also can use this button click effect on your website to give a good UI.
If you are thinking now how this button click effect actually is, then see the preview given below.
Preview Of Button Click Effect
See this video preview to getting an idea of how this button click ripple effect looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
JavaScript CSS Ripple Effect Button Like Android Source Code
Before sharing source code, let’s talk about it. First, I have created a main div and placed a heading and 4 buttons inside it. HTML has very little part in this program, and also I have linked external files like JS, CSS, and font in the HTML file. I have created the buttons by simply using HTML <button> tag and put a text inside it.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave different colors for different buttons using CSS :nth-child() property (info). And for creating the ripple effect, I gave a black background with low opacity and 100% border-radius for the circle shape. After that, I have created an animation using @keyframe and expand the are of the shape using transform: scale() command. For used transition delay for giving the final touch.
JavaScript handling here one of the main features of this program. JS detects the click, I mean where you have clicked on the button and starts the animation from the same place. After detecting the click JS changing the CSS values to start the effect. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files for that. First for HTML second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Ripple Effect | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>Ripple Effect Like Android</h1> <div id="wrap"> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { margin: 0; padding: 0; } #container { position: absolute; width: 100%; height: 100%; display: flex; flex-flow: column; justify-content: center; align-items: center; } h1 { display: flex; margin: 0; padding: 0; align-items: center; flex: 2; font-family: 'Oswald', sans-serif; letter-spacing: 1px; } #wrap { flex: 5; } button { position: relative; display: block; width: 13em; height: 3em; margin: 2em; border: none; outline: none; letter-spacing: .2em; font-weight: bold; background: #dfdfdf; cursor: pointer; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 2px; } button:nth-child(2) { color: #fff; background: #2ab1ce; } button:nth-child(3) { color: #fff; background: #4267b2; } button:nth-child(4) { color: #fff; background: #fa824e; } .ripple { position: absolute; background: rgba(0,0,0,.15); border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); pointer-events: none; } .ripple.show { -webkit-animation: ripple .75s ease-out; animation: ripple .75s ease-out; } @-webkit-keyframes ripple { to { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes ripple { to { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Code By Webdevtrick ( https://webdevtrick.com ) var addRippleEffect = function (e) { var target = e.target; if (target.tagName.toLowerCase() !== 'button') return false; var rect = target.getBoundingClientRect(); var ripple = target.querySelector('.ripple'); if (!ripple) { ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; target.appendChild(ripple); } ripple.classList.remove('show'); var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; ripple.style.top = top + 'px'; ripple.style.left = left + 'px'; ripple.classList.add('show'); return false; } document.addEventListener('click', addRippleEffect, false); |
That’s It. Now you have successfully created JavaScript CSS Ripple Effect Button Like Android, Button Click Effect. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
the animation is working but the problem is the animation is “playing” on another place (imagine there is 2 button, button A & B, the ripple applied on button A but not on button B, but the animation is playing/showing on button B).
what’d i do wrong?