Hello guys in this tutorial we will create Ajax Load More Button Animation Using Html Css and jQuery
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Load More Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="button-outer">
<button class="border-button load-more-btn">Load More</button>
</div>
<script type="text/javascript">
$(".load-more-btn").click(function(){
var $this = $(this).text("").html('<i class="fa fa-spinner fa-spin"></i>');
window.setTimeout(function(){
$this.html('').text("Load More");
},3000);
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f2f3f4;
}
.border-button {
outline: unset;
color: #444;
font-weight: 500;
background: #fff;
font-size: 18px;
text-transform: uppercase;
padding: 10px 30px;
border: 2px solid #444;
border-radius: 50px;
box-shadow: 0 0 0 5px #fff;
cursor: pointer;
text-align: center;
transition: box-shadow 0.6s linear;
}
.border-button:hover {
box-shadow: 0 0 0 5px #fff, 0 5px 10px rgba(0,0,0,0.3);
}