Hello developers, today in this blog, you'll learn to create a Pagination Design using HTML & CSS.
Pagination is the sequence of numbers assigned to pages. On a website, pagination is the method of dividing the contents of a website, into discrete pages. If a single page in a website contains more content, it won't give a good-looking UI. In such a case, the content can be split and can be kept on another page. If there are many pages, pagination can be used for that website.
In this blog (Pagination Design), on the webpage, there is a box at the center of the webpage that consists of a heading and the pagination container. The pagination container contains ten buttons with the previous button and the next button. When you click on a particular button, there is a box-shadow effect to indicate that a button is clicked or not.
The hover effect has been used in every button. When you hover a button, there is a background color to indicate that the button has hovered. The border-radius property has been used in every button, while both on hover and button click.
The source code of this Pagination Design is given below, if you want the source code of this program, you can copy it. You can use this Pagination Design with your creativity and can take this project to the next level.
Pagination Design [Source Code]
To make this website (Pagination Design), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to right, #01a9ac, #01dbdf);
}
::selection{
color: #fff;
background: #f23b26;
}
.container{
background: rgba(255, 255, 255, 0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25px 30px;
border-radius: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container .title{
font-size: 50px;
font-weight: 600;
}
.container p{
font-size: 19px;
}
.pagination{
margin: 25px 0 15px 0;
}
.pagination,
.pagination li a{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pagination li{
list-style: none;
}
.pagination li a{
text-decoration: none;
color: #000;
height: 50px;
width: 50px;
font-size: 18px;
padding-top: 1px;
border-right-width: 0px;
}
.pagination li:last-child a{
border-right-width: 1px;
}
.pagination li a:hover{
border-top-color: rgba(0,0,0,0.35);
border-bottom-color: rgba(0,0,0,0.5);
background: #01dbdf;
border-radius: 50px;
}
.pagination li a:focus,
.pagination li a:active{
padding-top: 4px;
border-left-width:1px;
background: rgba(255,255,255, 0.15);
box-shadow: inset 2px 2px 2px 2px rgba(0,0,0,.25);
border-radius: 50px;
}
.pagination li.icon a{
min-width: 120px;
}
.pagination li:first-child span{
padding-right: 8px;
}
.pagination li:last-child span{
padding-left: 8px;
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
margin-top: 50px;
}
.credit a{
text-decoration: none;
color: #072f5f;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Pagination Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team