We are going to see how to create simple and easy way to create animation buy now button. Animated buy now button using html and css. click the buy now go to process payment and next tracking package all function into buy now button. see the demo video and download the code:
Code:
Html:
<div class=”buy”>
<i class=”fa fa-check” aria-hidden=”true”></i>
<span>Buy Now</span>
<small>Rs.1000</small>
<div class=”download”>
<i class=”fas fa-shipping-fast” aria-hidden=”true”></i>
</div>
</div>
Css:
*, *:before, *:after {
margin: 0;
padding: 0;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-size:100%;
vertical-align:baseline;
background:transparent;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
html, body {
height: 100%;
width: 100%;
background-color: #e0e0e0;
font-family: sans-serif;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
zoom: 1.05;
}
html, body, .buy, .download {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
font-family: ‘Roboto Condensed’, sans-serif;
}
.buy {
color:white;
background-color:purple;
border: 2px solid #4c4c4c;
text-align: center;
text-transform: uppercase;
font-weight: bold;
width: 190px;
height: 45px;
font-size: 15px;
cursor: pointer;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
letter-spacing: 1.3px;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.04);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.04);
-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.04);
-o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.04);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.04);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.buy small {
font-weight: 100;
font-size: 14px;
margin-left: 5px;
opacity: .9;
}
.fa-check, .fa-shipping-fast {
display: none;
font-size: 17px;
}
.download {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50px;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #21d49a;
color: #F5F5F5;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
opacity: 0;
}
.download, .loading:before {
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
visibility: hidden;
}
.download.active {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
width: 100%;
will-change: opacity, visibility, width, height;
}
.download.active:after {
content: ‘Track Package’;
position: absolute;
display: block;
margin-left: 20px;
white-space: nowrap;
font-size: 16px;
color: #f5f5f5;
}
.download.active, .processing:before {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
visibility: visible;
}
.fa-shipping-fast {
margin-right: auto;
margin-left: 18px;
font-size: 14px;
}
.success {
color: #21d49a;
border-color: #21d49a;
will-change: color
Javascript:
$(document).ready(function() {
var canDownload = true;
var money = 100;
$(‘.balance span’).text(money);
$(‘.buy’).on(‘click’, function() {
if(canDownload === true) {
$(this).addClass(‘loading’).find(‘span, small’).hide();
setTimeout(function() {
$(‘.loading’).addClass(‘processing’);
canDownload = false;
setTimeout(function() {
$(‘.buy’).removeClass(‘processing’);
setTimeout(function() {
$(‘.buy’).removeClass(‘loading’).addClass(‘success’).find(‘.fa-check’).fadeIn(100);
setTimeout(function() {
money -= 39.99;
$(‘.balance span’).text(money);
$(‘.download’).addClass(‘active’).children().fadeIn(100, function() {
$(‘meta[name=”theme-color”]’).attr(‘content’,’#21d49a’);
$(‘.buy’).css(‘background-color’,’#21d49a’);
});
}, 1000);
}, 400);
}, 2800);
}, 300);
}
});
});
