How to create a smooth animated flowing button?

Question

I'm planning to change all the input[type=submit] s & button s in my website into this smooth animated flowing button.

So, how do I create this using HTML, JavaScript & CSS? Especially I made this GIF to post it in Stack Overflow. And I don't think, I've to post some codes in this question to explain it. :/

EDIT: I don't want exactly Curls effect with bottom right to top left. It should start affecting from the area I click. In the next GIF I've clicked in the middle. Now please see the affect.

I hope you can understand what I mean. It should start flowing to the outside from the exact area I click.

Answer 1

You can use hover.css, Checkout background transition in that http://ianlunn.github.io/Hover/ . If you want exactly like the one you posted. you can always try some trial and error with hover.css

Answer 2

您可以使用简单的CSS轻松看到此点击

Answer 3

Hope this helps!

 .button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; overflow: hidden; } .button:after { content: ""; background: #90EE90; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } 

 <button class="button">Click Me</button> 

Answer 4

Please check this , hope it is helpful.

 a { padding: 20px 30px; line-height:30px; color:#fff; font-size: 20px; background:#ff0000; text-decoration: none; position: relative; transition: all ease .6s; overflow:hidden; display: inline-block; } a span { z-index:1; position:relative; } a:after { transform: scale(0); background: #000; position: absolute; right:-200px; bottom:-200px; content:''; border-radius: 100%; transition: all ease .6s; width: 400px; height: 400px; } a:hover:after { transform:scale(1); transition: all ease .6s; } 

 <a href="#"><span>Test</span></a> 

Answer 5

can be achieved by a small tweak from "Abhitalks" answer from this question !

In html :

<div class="outer_box" id="btn">
    <span>Button text</span>
    <div id="dummy"></div>
</div>

css :

 .outer_box{
    background-color: transparent;
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid silver;
    text-align:center;
   }

#dummy { 
    position: absolute;
    top: 400px; left: 400px;
    width: 1px; height: 1px;
    background-color: gray;
    z-index: -5;
}

Script :

$('#btn').on("click", function() {
    $('#dummy').animate({
        'width': '400px',
        'height': '400px',
        'top': '0px',
        'left': '0px'
    }, 500);    
    //and any action to be done on click :)
});