• Saturday , 23 November 2019

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

Code Canyon



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

3d Ocean

Related Posts

40 Comments

  1. siema32
    October 21, 2019 at 05:58

    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. Tizen
    October 21, 2019 at 05:58

    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)

  3. Flynnsmtg
    October 21, 2019 at 05:58

    If hte button is in the right of window, wave doesnt work:(

  4. EvoLution - EvoTV
    October 21, 2019 at 05:58

    there is a way to make it in powerpoint?!

  5. NotTheBestGaming
    October 21, 2019 at 05:58

    What are you using to get your atom to look like that?

  6. Максим Рузметов
    October 21, 2019 at 05:58

    Bro it's awesome!
    Thank you soo much)

  7. Martin Nørlund
    October 21, 2019 at 05:58

    What if i want to use this effect for input buttons. How can i make that work aswell?

  8. Hoàng Xuân Vinh
    October 21, 2019 at 05:58

    what theme you are using

  9. Craftofant
    October 21, 2019 at 05:58

    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.

  10. Krrish
    October 21, 2019 at 05:58

    U should zoom ur video when u r going to type

  11. herbert kavuma
    October 21, 2019 at 05:58

    Thks its helpful i cant wait to subscribe

  12. Juan Zamora
    October 21, 2019 at 05:58

    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);
    }

  13. Code Instinct
    October 21, 2019 at 05:58

    Great Tutorial!! Helped me a lot, thanks! ☺

  14. Amit Schandillia
    October 21, 2019 at 05:58

    Hey just a quick question, what if one wants the circle's center to align with that of the button being clicked irrespective of what part of the button is clicked?

  15. luiz rodrigues
    October 21, 2019 at 05:58

    How can i link somethink to this button?

  16. Luis J. Albizu
    October 21, 2019 at 05:58

    Thank you!

  17. mohammad omer
    October 21, 2019 at 05:58

    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 ^_^

  18. mohammad omer
    October 21, 2019 at 05:58

    You know what I love you, bro, you actually taught me what I was seeking God bless you man thanks so much <3

  19. Johan Sundman
    October 21, 2019 at 05:58

    Great tutorial, I made a small module out of it which will turn any button sent to it into a ripple button. I used the setTimeout function to terminate the childnodes. https://github.com/JohanSundman/ripple-button

  20. Nelson King
    October 21, 2019 at 05:58

    I'm getting an Uncaught TypeError at this.appendChild – this.appendChild is not a function. Help.

  21. Ronny Dark
    October 21, 2019 at 05:58

    Really good tutorial! It helped me a lot. Just 1 suggesstion: Delete the "Pure" before CSS. If it's css and js, it can't be pure css.

  22. Parad0x
    October 21, 2019 at 05:58

    Finally!! thanks bro

  23. Elwin de Witte
    October 21, 2019 at 05:58

    You explained that very well. Still getting to learn Javascript, but this helped me take another step in the right direction. Thanks man!

  24. Leandro Parice
    October 21, 2019 at 05:58

    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

  25. opalgemstone
    October 21, 2019 at 05:58

    ziehne

  26. Devarsh Shah
    October 21, 2019 at 05:58

    This was so well explained

  27. Vikram Prasad
    October 21, 2019 at 05:58

    How can we do all this in Angular JS where i can change the color of my button in a ripple formation way permanently.

  28. premier69
    October 21, 2019 at 05:58

    Thank you very much for your hard work!

  29. Jem Sanchez
    October 21, 2019 at 05:58

    link href="asdfsdf"? cant see that clearly. it doesnt matter right?

  30. Mehmet Efe Akça
    October 21, 2019 at 05:58

    Can you tell me the extensions you use for Atom? Especially the extension that shows a quick small preview of the file at the top right.

  31. Yosef Rahahleh
    October 21, 2019 at 05:58

    you are awesome and thank you very very much, your explain is very helpful

  32. fuji
    October 21, 2019 at 05:58

    Do you have skype? I am having a issue where the ripple is going in the middle of the page instead of in the button

  33. Graham Colville
    October 21, 2019 at 05:58

    Really cool tutorial!

  34. Mukkadas Siddiqui
    October 21, 2019 at 05:58

    Great tutorial! thank you so much!

  35. Dipesh Rai
    October 21, 2019 at 05:58

    Great Tutorial !

    It would be great if you make tutorial of comment box using AJAX!

  36. Orion Lamothe
    October 21, 2019 at 05:58

    if only this worked.

  37. Akshay Desai
    October 21, 2019 at 05:58

    Nice and perfect tutorial. please help if we write this code in any div button ripple is not working in below code

    <div id="wrapper">
    <form>

    <button>submit</button>
    </form>
    </div>

  38. Iran Marcanmay
    October 21, 2019 at 05:58

    it creates many divs and i would like that stop it, also i would like to know how i can get the exact point which user click. ty

  39. Granger744
    October 21, 2019 at 05:58

    Beautiful text editor ya got there.

  40. Natalia Flores
    October 21, 2019 at 05:58

    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 Comment

You must be logged in to post a comment.