Create Load More Button using HTML CSS only

Hello Visitors, In this blog, we are going to learn how to create a photo gallery with a load more button underneath it. I have shared many projects on HTML CSS, CSS animation examples, JavaScript, jQuery plugin implementation, CSS effects etc before in this blog. If you are interested, then check out those by clicking the load more button on the homepage. Now for this snippet, please follow the video tutorial first, then come back to get the code. We upload regular videos so if you want, subscribe to our YouTube channel for more front-end development-related videos.

I hope you have watched the tutorial and got some idea about today's project. What we are trying to do here is to build an image gallery CSS with a load more button at the bottom. Initially, there will be three images but when we click on the 'load more' CSS button, six more images will appear. Usually, we can achieve this effect using JavaScript or jQuery. The effect will be more interactive than the project we are doing here. Here we have tried to make it possible using only HTML CSS.

You May Like this:

Load more Button using HTML CSS [ Source Code ]:

To create this snippet, first, create an HTML file with a .html extension and then a CSS file with a .css extension. Please add the external CSS file to your HTML file. After that, please copy the code from the below code boxes and paste them into your project. If you are having a problem with the code, then download the source code from the button below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>How to create load more button using html css only</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<input id="btnBox" type="checkbox">
		<ul>
			<li style="background-image: url(https://images.pexels.com/photos/3493777/pexels-photo-3493777.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/3761178/pexels-photo-3761178.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/6152103/pexels-photo-6152103.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/694587/pexels-photo-694587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/3264706/pexels-photo-3264706.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/2448248/pexels-photo-2448248.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/783795/pexels-photo-783795.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/9892462/pexels-photo-9892462.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
			<li style="background-image: url(https://images.pexels.com/photos/3762569/pexels-photo-3762569.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)"></li>
		</ul><label class="btn-area" for="btnBox"><span class="btn1">LOAD MORE</span> <span class="btn2">LOAD LESS</span></label>
	</div>
</body>
</html>

ADD CSS:

body {
	background: #f2e7e5;
	font-family: sans-serif;
}
.wrapper {
	width: 900px;
	min-height: auto;
	margin: 20px auto;
}
.wrapper ul {
	list-style: none;
	padding: 0;
}
.wrapper ul:after {
	content: '';
	display: table;
	clear: both;
}
.wrapper ul li {
	width: calc(30% - 5px);
	margin: 30px 15px 0;
	height: 150px;
	background-size: cover;
	background-position: center center;
	float: left;
	box-shadow: 0 15px 10px 1px rgba(0, 0, 0, 0.5);
}
.wrapper ul li:nth-child(1n + 4) {
	max-height: 0;
	opacity: 0;
	transition: 0.2s ease-in;
}
.wrapper .btn-area {
	display: block;
	background: #7f2a4b;
	color: #fff;
	cursor: pointer;
	text-align: center;
	font-weight: 900;
	width: 180px;
	line-height: 50px;
	margin: 50px auto 0;
	border-radius: 50px;
}
.wrapper .btn-area .btn2 {
	display: none;
}
.wrapper #btnBox {
	display: none;
}
.wrapper #btnBox:checked~ul li:nth-child(1n + 4) {
	max-height: 1000px;
	opacity: 1;
	transition: 0.2s ease-in;
}
.wrapper #btnBox:checked~.btn-area .btn2 {
	display: block;
}
.wrapper #btnBox:checked~.btn-area .btn1 {
	display: none;
}

I hope you have successfully implemented the code. If you like this snippet, then consider following us on our social media profiles. Please stay connected with this blog for more interesting projects soon. Thank you for visiting the blog.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

Create Load More Button using HTML CSS only

You might like

Post a Comment

Post a Comment

Contact Form