How to Change the Size of the Pagination using CSS ?

Last Updated : 21 Mar, 2024

Pagination is an important user interface component that enables navigation through a set of pages. We can customize this element by adjusting its size.

These are the two different approaches to customize and change the pagination size using CSS:

Table of Content

Using font-size Property

In this approach, we are customizing the pagination size by using the CSS font-size property. The two different paginations have been displayed each having a different size.

Syntax:

font-size: value;

Example: The below example uses font-size Property to Change the size of the pagination using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Using font-size Property</title>
    <style>
        .pag1 {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .pag1 a {
            color: black;
            padding: 10px 15px;
            text-decoration: none;
            transition: background-color .3s;
            border: 2px solid #3498db;
            background-color: #ffffff;
            font-size: 26px;
            margin: 0 5px;
            border-radius: 5px;
        }

        .pag1 a.active {
            background-color: #4CAF50;
            border: 2px solid #4CAF50;
        }

        .pag2 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        .pag2 a {
            color: green;
            padding: 8px 12px;
            text-decoration: none;
            transition: background-color .3s;
            border: 2px solid #e74c3c;
            background-color: #ffffff;
            font-size: 8px;
            margin: 0 8px;
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <br>
    <h1 style="color: green; text-align: center;">
          GeeksforGeeks
      </h1>
    <h3 style="text-align: center">
          Using font-size Property
      </h3>
    <div class="pag1">
        <a href="#">&#9665;</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">&#9655;</a>
    </div>
    <div class="pag2">
        <a href="#">&#9665;</a>
        <a href="#">1</a>
        <a href="#" class="active">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">&#9655;</a>
    </div>
</body>

</html>

Output:

Example-1

Using Scaling

In this approach, we are using the CSS transform property with the scale function to change the size of pagination components. The transform-origin property makes sure scaling from the center, and different classes (scaled-pagination and larger-scaled-pagination) provide distinct scale factors for various-sized and larger-sized paginations.

Syntax:

 transform: scale(1.2);

Example: The below example uses Scaling to Change the size of the pagination using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using Scaling</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }

        .pag1 {
            display: inline-block;
            margin: 10px;
            border: 1px solid #ddd;
            overflow: hidden;
            transform: scale(1);
        }

        .pag2 {
            display: inline-block;
            margin: 10px;
            border: 1px solid #ddd;
            overflow: hidden;
            transform-origin: center;
            transform: scale(1.5);
        }

        .pag3 {
            display: inline-block;
            margin: 10px;
            border: 1px solid #ddd;
            overflow: hidden;
            transform-origin: center;
            transform: scale(2.5);
        }
    </style>
</head>

<body>
    <br>
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h3>Using Scaling</h3>
    <div class="pag1">
        <a href="#">&#8592;</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">&#8594;</a>
    </div>
    <br>
    <div class="pag2">
        <a href="#">&#8592;</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">&#8594;</a>
    </div>
    <br><br>
    <div class="pag3">
        <a href="#">&#8592;</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">&#8594;</a>
    </div>
</body>

</html>