This is simple way to add animation to buttons. The wave effect is one of the nice animation effect for buttons. This is easy to create using Css and jquery. This is also one of the interesting and useful concept for websites.
The below example shows the wave type animation on click the button. Demo also available check this below demo.
The below example shows the wave type animation on click the button. Demo also available check this below demo.
Css code for wave animation on click the button
.button {
width: 220px;
height: 100px;
background: #0d3300;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 30px;
cursor:default;
border-radius:8px;
}
/* Ripple */
.ripple {
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-webkit-transform: scale(0);
transform: scale(0);
position: absolute;
opacity: 1;
}
.rippleEffect {
-webkit-animation: rippleDrop .6s linear;
animation: rippleDrop .6s linear;
}
@-webkit-keyframes rippleDrop {
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@keyframes rippleDrop {
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
Js code for wave animation on click the button
$(".button").click(function (e) {
$(".ripple").remove();
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
$(this).prepend("<span class='ripple'></span>");
if(buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
Html code for wave animation on click the button
<body>
<div class="button">Click Button</div>
<h1>Click the button to see <br >the wave animation </h1>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
0 Comments