I tried to create this effect based on material design buttons on android devices. Just using simple CSS and JavaScript.
HTML
<button type="button" class="button red"> Ripple Effect </button>
<button type="button" class="button blue"> Ripple Effect </button>
<button type="button" class="button green"> Ripple Effect </button>
<button type="button" class="button orange"> Ripple Effect </button>
CSS/SCSS
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-wrap: wrap;
align-content: center;
}
.button {
margin: 10px;
padding: 10px 20px;
position: relative;
overflow: hidden;
border-radius: 5px;
border: 2px solid;
background-color: transparent;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.button.red {
color: red;
border-color: red;
}
.button.red .ripple_effect {
background-color: #ff000080;
}
.button.blue {
color: blue;
border-color: blue;
}
.button.blue .ripple_effect {
background-color: #0000ff80;
}
.button.green {
color: green;
border-color: green;
}
.button.green .ripple_effect {
background-color: #00800080;
}
.button.orange {
color: orange;
border-color: orange;
}
.button.orange .ripple_effect {
background-color: #ffa50080;
}
.button:focus {
outline: none;
}
.button .ripple_effect {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple_effect 0.4s linear;
}
@keyframes ripple_effect {
to {
transform: scale(4);
opacity: 0;
}
}
SCSS
$color-primary: #eb4d4b;
$color-white: #ffffff;
$color-white-transparent: #ffffff54;
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-wrap: wrap;
align-content: center;
}
.button {
margin: 10px;
padding: 10px 20px;
position: relative;
overflow: hidden;
border-radius: 5px;
border: 2px solid;
background-color: transparent;
font-size: 14px;
font-weight: bold;
cursor: pointer;
&.red {
color: red;
border-color: red;
.ripple_effect {
background-color: #ff000080;
}
}
&.blue {
color: blue;
border-color: blue;
.ripple_effect {
background-color: #0000ff80;
}
}
&.green {
color: green;
border-color: green;
.ripple_effect {
background-color: #00800080;
}
}
&.orange {
color: orange;
border-color: orange;
.ripple_effect {
background-color: #ffa50080;
}
}
&:focus {
outline: none;
}
.ripple_effect {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple_effect 0.4s linear;
}
}
@keyframes ripple_effect {
to {
transform: scale(4);
opacity: 0;
}
}
JavaScript
$(document).on('click', '.button', function(e) {
var element = document.createElement('DIV');
var current = $(this);
var offset = current.offset();
var max = Math.max(current.width(), current.height());
$(element).width(max);
$(element).height(max);
$(element).css({
'left': e.clientX - offset.left - max/2 + 'px',
'top': e.clientY - offset.top - max/2 + 'px'
});
current.prepend(element);
$(element).addClass('ripple_effect');
setTimeout(function(){
$(element).remove();
},500);
});
That's it.
You can check working demo here Codepen.
Top comments (0)