Study Smart, Not Hard. - StudyMuch

CSS Pagination

Published by StudyMuch on

CSS Pagination studymuch.in

CSS Pagination with Programming Examples

I this tutorial you will learn, how to create a responsive pagination using the CSS, learn hare how to make a pagination with the use of HTML and CSS.

If you have a website or you want to make a website and, in your website a huge number of pages then you may add some short of pagination.

Here you will read and see the programming examples of different types of paginations such as, Border Pagination, Hover Effect Pagination, Active Status Pagination, Changing Size Pagination, Rounded Pagination etc.

What is CSS Pagination?

A CSS Pagination is typically composed of numbers and alphabets with left and right arrows to next and previous. Each of them contains the pages and articles link.

For Example: – You have as many as articles in your website, do you think a simple navigation bar will be enough to help users navigate through 100 articles, of course not, that time Pagination is help the user to navigate the all articles. Look below the simple programming examples with output.

Programming Examples of CSS Pagination;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pagination</title>
    <style type="text/css">
 .pagination{
        display: inline-block;
        margin: 0;
        padding: 0;}
 .pagination a{ text-decoration: none;
        color: white;
        padding: 5px ;
        float: left;}
  .pagination li{display: inline;}
        div{height: 29px
        width: 140px;
        background: green;
        border-radius: 10px;}
    </style>
</head>
<body>
    <div>
    <ul class="pagination">
        <li><a href="#"><</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">></a></li>
    </ul>
</div>
</body>
</html>

Output of above Programming Examples;

CSS Pagination

Above you can see a simple CSS Pagination style, in this pagination left side a previous arrow and right side a next arrow, and in center 1 to 5 number.

Bordered Pagination

Now, here we will create a pagination with border, above you can saw pagination with green background and all the number is white but it has not a border.

For create the border on pagination we use Border and Border-Right properties.

Here you see the pagination with the border. Look below the programming examples for better understanding.

Programming Example of Border Pagination;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pagination</title>
    <style type="text/css">
  .pagination{
            display: inline-block;
            margin: 0;
            padding: 0;
            border: 1px
            solid darkgreen;
            font-weight: bold;}
  .pagination a{text-decoration: none;
            color: green;
            padding: 5px ;
            float: left;
            border-right: 1px
            solid darkgreen;}
   .pagination li{display: inline
   .container{text-align: center;}
   .pagination
   li:last-child>a {border: none;}
    </style>
</head>
<body>
    <div class="container">
    <ul class="pagination">
      <li><a href="#"><</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">></a></li>
    </ul>
</div>
</body>
</html>

Output of above Programming Examples;

CSS PaginationAbove you can see the output of programming example of bordered pagination, here we used the border property to set the border.

Hover Effect Pagination

Here is a basic hover effect of pagination design, we create here a hover effect pagination, to create this style we need to use the hover property in the CSS pagination. Look below the programming example to better understanding.

Programming Examples of Hover Effect;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pagination</title>
    <style type="text/css">
  .pagination{display: inline-block;
            margin: 0;
            padding: 0;
            border: 1px
            solid darkgreen;
            font-weight: bold;}
  .pagination a{text-decoration: none;
            color: green
            padding: 5px ;
            float: left;
            border-right: 1px
            solid darkgreen;
        transition-duration: 1s;}
  .pagination a:hover{color: white;
        background: green;}
  .pagination li{display: inline;}
  .container{text-align: center;}
  .pagination
   li:last-child>a {border: none;}
    </style>
</head>
<body>
    <div class="container">
    <ul class="pagination">
      <li><a href="#"><</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">></a></li>
    </ul>
</div>
</body>
</html>

Output of above Programming Examples;

CSS PaginationOutput of Hover Pagination in Video mode for better understand.

You can sea the above output hover pagination, when mouse is over color of number and background is changed in 1 second.

Active Status of Pagination

Here we create an active status of CSS pagination. It is highly recommended to highlight the link where the users are currently in for easier navigation.

To create this, simply add the active class name to the corresponding link where the user is currently in.

Look below the programming examples of Active Status Pagination to better understanding.

Programming Examples of Active Status Pagination;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pagination</title>
    <style type="text/css">
 .pagination{display: inline-block;
            margin: 0;
            padding: 0;
            border: 1px solid blue;
            font-weight: bold;}
  .pagination a{text-decoration: none;
            color: black;
            padding: 5px ;
            float: left;
            border-right: 1px
            solid blue;
            transition-duration: 1s;}
  .pagination a:hover{color: white;
        background:#0076ff;}
  .paginationli{display: inline;}
  .container{text-align: center;}
  .pagination li:last-child>a {border: none;}
  .active{color: white;
        background: #0076ff;}
    </style>
</head>
<body>
    <div class="container">
    <ul class="pagination">
     <li><a href="#"><</a></li>
<li><a href="#" class="active">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
     <li><a href="#">5</a></li>
     <li><a href="#">></a></li>
    </ul>
</div>
</body>
</html>

Output of above programming example in video mode;

Above you can see the output of video of active status CSS pagination, one number is active that is always blue background.

Rounded Pagination

Now, here you see the rounded CSS Pagination, to create this we need to use the border-radius in the pagination. For better understanding look below the programming example.

Programming Examples Rounded CSS Pagination;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pagination</title>
    <style type="text/css">
    .pagination{ display: inline-block;
            margin: 0;
            padding: 0;
            border: 2px
            solid rgb(179, 0, 255);
            font-weight: bold;
            font-size: 20px;
            border-radius: 20px;}
   .paginationa{ text-decoration: none;
            color: rgb(8, 114, 3);
            padding: 5px ;
            float: left;
            border-right: 2px
        solid rgb(133, 7, 212);
            transition-duration: 1s;}
   .pagination a:hover{color: white;
        background:#9103f7;}
   .pagination li{display: inline;}
   .container{text-align: center;}
   .pagination li:last-child>a 
        {border: none;}
   .active{color: white;
        background: #8c00ff;}
    </style>
</head>
<body>
    <div class="container">
    <ul class="pagination">
        <li><a href="#"><</a></li>
<li><a href="#"class="active">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
     <li><ahref="#">></a></li>
    </ul>
</div>
</body>
</html>

Output of above rounded Pagination Programming Examples;

CSS Pagination

Above you see the output of rounder pagination, this is a different style of pagination look fantastic you can use this in your blog or webpages.

You can create this different with a different color and style with your own style.

So, in this tutorial you learned the CSS Pagination with different – different style, like Border Pagination, Hover Effect Pagination, Active Status Pagination, Changing Size Pagination, Rounded Pagination. I hope you read this better and learn something new from this tutorial.

If you try to make this type of pagination from your blog and revision project, you can copy this pagination programming for revision purpose.

Read Also-

 

Categories: CSS
Tags:

2 Comments

zoritoler imol · July 1, 2022 at 12:11 pm

You should take part in a contest for one of the best blogs on the web. I will recommend this site!

Reply

Leon Enck · September 23, 2022 at 8:40 am

Some genuinely good info , Glad I observed this.

Reply

Leave a Reply

Avatar placeholder

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

Related Posts

Payment Method HTML Code

Payment Method HTML Code In this article you will learn and get code to create how to design a payment method page with HTML, CSS and JavaScript. That page provided a platform for payment with Read more…

CSS Grid HTML

CSS Grid

CSS Grid In this tutorial you will learn about the Gride view of CSS (CSS Grid), with programming and coding examples. The Grid is the very important part of CSS for designing the responsive website. Read more…

Navigation Bar studymuch.in

CSS Navigation Bar

CSS Navigation Bar Navigation bar is the most important part of any Websites and Web pages. In navigation, we put link of pages and Menu. In this article “CSS Navigation Bar” we have given you Read more…