Ripple effect problem: not reaching edges - css

Question

I am currently trying to create a CSS ripple effect. When I scale the button the ripple don't reach the edges of the button. The speed of the growth of the ripple is the same for every button size. It is a regular button. The CSS is added when the button is pressed.
This is my CSS code:
position: absolute;
background: #000;
border-radius: 50%;
width: 5px;
height: 5px;
animation: ripple 0.88s linear;
opacity: 0;
pointer-events: none;
#keyframes ripple {
from {
transform: scale(1);
opacity: 0.4
}
to {
transform: scale(100);
opacity: 0;
}
}
Thanks in advance!

Answer 1

Separate the ripple effect from the button element. Use a span element to execute the animation. Like so:
$(document).ready(function(){
$('button').on('click',function(){
$(this).find('.ripple').remove();
$(this).append($('<span class="ripple"></span>'));
});
});
button{
position: relative;
overflow: hidden;
width: 100px;
height: 25px;
}
button.big{
width: 200px;
height: 50px;
}
button.bigger{
width: 400px;
height: 100px;
}
.ripple{
position: absolute;
background: #000;
border-radius: 50%;
width: 5px;
height: 5px;
opacity: 0;
pointer-events: none;
animation: ripple 0.88s linear;
transform: scale(1);
top: 50%;
left: 50%;
}
#keyframes ripple {
from {
transform: scale(1);
opacity: 0.4
}
to {
transform: scale(100);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="">Ripple!</button>
<button class="big">Ripple!</button>
<button class="bigger">Ripple!</button>
Keep in mind that, since you're scaling to a 100x size, the biggest buttons your effect will support is a little under 500px wide (because of the ripple's borders)