JavaScript CSS Ripple Effect Button Like Android | Button Click Effect
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.
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.
<!DOCTYPE html><!-- Code By vastbl ( https://vastbl.blogspot.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.
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
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.
0 Comments