D4mations.com

Google-like BUTTON RIPPLE EFFECT in Pure CSS & JavaScript Tutorial



A simple way to make your own button ripple effect, similar to that found in Google’s material design.

Code can be found here: https://github.com/GeekLaunch/button-ripple-effect
Live demo: https://geeklaunch.github.io/button-ripple-effect/index.html

Note that this code is my own original creation, not copied from any external source.

GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), Java programming, tips for power users, among many others. Subscribe: New video every Wednesday!

Not a geek? Start today!

Original source

d4mer

, , , , , , , , , , , , ,

40 responses to “Google-like BUTTON RIPPLE EFFECT in Pure CSS & JavaScript Tutorial”

  1. I prefer pageX and pageY instead of clientX/Y. I mean:

    When
    circle.style.left = e.clientX – this.offsetLeft – d / 2 + "px";

    circle.style.top = e.clientY – this.offsetTop – d / 2 + "px";
    it takes width and height of an screen so when you'll scroll down it will drop coordinates (because screen have always the same width and height – only page height and width is changing) and give false value.

    When you do it like this:
    circle.style.left = e.pageX – screenLeft – this.offsetLeft – d / 2 + "px";

    circle.style.top = e.pageY – screenTop – this.offsetTop – d / 2 + "px";
    you can scroll down and everything works.

    Thanks for this video – helped me so much.

  2. Google has now made this public to everyone. Include "<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script&gt;" in <head>. If you would like to add the ripple to anything, follow these steps:

    1. Find an object to add a ripple to.

    <button class="one-class another-class even-another-class">Hello World</button>

    2. Include "mdl-js-ripple-effect"
    <button class="one-class another-class even-another-class mdl-js-ripple-effect">Hello World</button>

    That's all (I've added a link to a codepen; https://codepen.io/Tizen20/pen/Bgepzz?editors=1000#0)

  9. First of all, I would like to thank you for making this video as this is the only way that worked for me and isn't a gigantic library that adds unnecessary loading time but still is easy to customize.
    It all works great for me on buttons / simple boxes however not on text elements that are styled like buttons:
    I already found a way to fix a problem where the size of the effect would be 0*0px (marked in the codepen) but I have no clue how to stop the effect from leaving the button itself.
    I'd really appreciate if you could take a look at my problem and maybe help me fix it 😉
    https://codepen.io/anon/pen/ddJMVN

    Also I've modified it to use jQuery, slightly changed the animation and added an auto-removal for the divs.

  12. I use this code

    function gota(e){

    var w=e.pageX-boton.offsetLeft;
    var h=e.pageY-boton.offsetTop;

    var c=document.createElement("div");
    var d=boton.appendChild(c);

    d.setAttribute("class","efecto");

    var pox=e.pageX-boton.offsetLeft;
    var poy=e.pageY-boton.offsetTop;

    d.style.left=pox+"px";
    d.style.top=poy+"px";

    setTimeout(function(){

    boton.removeChild(c);
    },3000);
    }

  17. circle.style.width = circle.style.height = d + 'px';

    var rect = this.getBoundingClientRect();
    circle.style.left = e.clientX – rect.left -d/2 + 'px';
    circle.style.top = e.clientY – rect.top – d/2 + 'px';

    a little more explanation of these positioning and sizing please ^_^

  24. Good job! I used this to eliminate the 'divs':

    function createRipple(e)
    {
    if(this.getElementsByClassName('ripple').length > 0)
    {
    this.removeChild(this.childNodes[1]);
    }

    var circle = document.createElement('div');
    this.appendChild(circle);

    var d = Math.max(this.clientWidth, this.clientHeight);
    circle.style.width = circle.style.height = d + 'px';

    circle.style.left = e.clientX – this.offsetLeft – d / 2 + 'px';
    circle.style.top = e.clientY – this.offsetTop – d / 2 + 'px';

    circle.classList.add('ripple');
    }

    See in: https://codepen.io/campao/pen/EmPvbM

  40. Thank you so much for this tutorial. It helped me A LOT!
    i used:

    var element = e.target;
    var rect = element.getBoundingClientRect();
    circle.style.left = e.clientX – rect.left -d/2 + 'px';
    circle.style.top = e.clientY – rect.top – d/2 + 'px';

    because that coordinades in the code didnt work for me.. hope it helps someone

Leave a Reply