How to create pagination using html css? |

Hello Friends, Today in this blog you’ll learn how to create a How to create pagination using html css?. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to make profile card in html and css? Now it’s time to create Pagination ui design using  HTML & CSS.

Video tutorial of Pagination ui design using HTML and CSS

You may also like:

In the video, you’ve seen the CSS pagination. There are many different ways to create this pagination ui design one of which is the way we have designed it.

Pagination ui design using html and css[Source Codes]

So to create this, pagination UI you need to create two different files. The 2 files are index.html & style.css  files. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your CSS file. Remember you’ve to create a file with a .css extension

CSS CODE

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

body{
  background-color: #7f99fa;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination{
  background-color: #f2f2f2;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
}

.pagination a{
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  transition: .3s linear;
}

.pagination a:hover{
  color: #fff;
  background-color: #5271e9;
}

.bottom_bar{
  position: absolute;
  width: 100px;
  height: 4px;
  background-color: #000;
  bottom: 0;
  left: -100px;
  transition: .4s;
}

.pagination a:nth-child(1):hover ~ .bottom_bar{
  left: 0;
}

.pagination a:nth-child(2):hover ~ .bottom_bar{
  left: 101px;
}

.pagination a:nth-child(3):hover ~ .bottom_bar{
  left: 201px;
}

.pagination a:nth-child(4):hover ~ .bottom_bar{
  left: 301px;
}

.pagination a:nth-child(5):hover ~ .bottom_bar{
  left: 401px;
}

.pagination a:nth-child(6):hover ~ .bottom_bar{
  left: 501px;
}

.pagination a:nth-child(7):hover ~ .bottom_bar{
  left: 601px;
}

.pagination a:nth-child(8):hover ~ .bottom_bar{
  left: 701px;
}

@media (max-width:600px)
{
  .pagination a:nth-child(4){
    display: none;
  }

  .pagination a:nth-child(5){
    display: none;
  }
}

				
			

Now create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

HTML CODE

				
					<!DOCTYPE html>
<!-- Created By MultiWebPress - www.multiwebpress.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination UI | MultiWebPress</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
</head>
<body>
  <div class="pagination">
    <a href=""><i class="fas fa-chevron-left"></i> PREV</a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">...</a>
    <a href="">10</a>
    <a href=""> &nbsp;NEXT <i class="fas fa-chevron-right"></i></a>
    <div class="bottom_bar"></div>
  </div>
</body>
</html>
				
			

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created Pagination ui design using html and css. If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

SHARE

Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on facebook
Share on whatsapp
Share on telegram
Share on email
Share on twitter
Share on pinterest
Share on linkedin