Hello Guys, In this article or video we will see Load More Button Using HTML CSS & jQuery. You will use this Load More Button on your website freely. If you learn How to create this Load More Button so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Load More Button Using HTML CSS & jQuery - Pure Coding</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="3.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
macOS New Update
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="3.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
macOS New Update
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="3.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
macOS New Update
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</div>
<div class="col">
<div class="imgBox">
<img src="3.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
macOS New Update
</h2>
</div>
</div>
</div>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 3).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 3).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
</script>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
}
.container {
width: 1000px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
.container .row .col {
margin: 20px;
display: none;
}
.container .row .col:hover .content {
box-shadow: 0 0 20px rgba(0,0,0,.3);
}
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
.container .row .col .content {
width: 100%;
height: auto;
background: #f1f1f1;
padding: 20px;
border-radius: 0 0 5px 5px;
transition: .3s;
}
.container .row .col .content h2.title {
font-size: 1.3rem;
font-weight: 800;
color: #111;
}
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
This comment has been removed by the author.
ReplyDeletethank you so much,, very good man..
ReplyDeleteYou are really helping a lot of us by allowing us to see both the videos and source code of programs
ReplyDeleteGreat tutorial, big fan of your work.
ReplyDeletePost a Comment