Creative CSS3 Html5 And Jquery Click on the buttons to see the effect

Creative CSS3 Html5 And Jquery Click on the buttons to see the effect

Example Code : https://codepen.io/poobn_paul/pen/ooWovz

Music collect by : youtube.com

Youtube:    / @pobonpaul  

Facebook:  / bangla.video.tutorials94  

Twitter:   / pobonpaul1994  

Blog:http://bengali-tutorials.blogspot.com/

Google+:https://plus.google.com/+Pobonpaul/

You can also find me : https://www.google.com.bd

Code Sample:



//CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
overflow-x: hidden;
}

.btn-wraper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.btns {
position: relative;
padding: 90px;
background-color: red;
display: inline-block;
}
.btns:before {
position: absolute;
content: "\f0e5";
font-family:'FontAwesome';
font-size: 4em;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.btns:after {
position: absolute;
content: "\f075";
font-family:'FontAwesome';
font-size: 4em;
color: #333;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
opacity: 0;
}
.active.btns:after {
animation: scaleFade 0.5s forwards;
}
@keyframes scaleFade {
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2.5);
}
}

//Jquery
$(document).ready(function() {
$('.btns').on('click', function(event) {
event.preventDefault();
var btn = $('.btns').addClass('active');

setTimeout(function() {
btn.removeClass('active');
}, 400);
});
});


// Extra Tag
Creative CSS3 Html5 And Jquery Click on the buttons to see the effect,css3 tutorial,css3 animation,css3 advanced tutorial,css3 animation tutorial,jquery tutorial,jquery tutorial for beginners,html5 css3 tutorial,html5 tutorial,html5 and css3 tutorial,tutorials,jquery setTimeout() tutorial,click function with settimeout(),css3 animation tutorial,css3 advanced animation,css3 pulse button tutorial,css3 click and pulse effect button tutorial