WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Pagination Examples


Responsive pagination utilizing CSS.


Simple Pagination

If you have a site with heaps of pages, you may wish to include some kind of pagination to each page:

To make a pagination, style a HTML list:

Example

ul.pagination {
    show: inline-block;
    cushioning: 0;
    edge: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    shading: black;
    glide: left;
    cushioning: 10px 14px;
    content enrichment: none;
}
Try it Yourself »

Active and Hoverable Pagination

Highlight the present page with a .active class, and utilize the :hover selector to change the shade of each page connect while moving the mouse over them:

Example

ul.pagination li a.active {
    foundation shading: #f4b841;
    shading: white;
}

ul.pagination li a:hover:not(.active) {background-shading: #41dff4;}
Try it Yourself »

Rounded Active and Hoverable Buttons

Add the border-radius property in the event that you need an adjusted "dynamic" and "float" button:

Example

ul.pagination li a {
    fringe sweep: 8px;
}

ul.pagination li a.active {
    fringe sweep: 8px;
}
Try it Yourself »

Hoverable Transition Effect

Add the transition property to the page connects to make a change impact on hover:

Example

ul.pagination li a {
    progress: foundation shading .3s;
}
Try it Yourself »

Bordered Pagination

Use the border property to add fringes to the pagination:

Example

ul.pagination li a {
    fringe: 1px strong #f4b841;
}
Try it Yourself »

Rounded Borders

Tip: Add adjusted fringes to your first and last connection in the pagination:

Example

.pagination li:first-kid a {
    outskirt upper left-sweep: 5px;
    outskirt base left-sweep: 6px;
}

.pagination li:last-kid a {
    outskirt upper right-sweep: 5px;
    outskirt base right-sweep: 5px;
}
Try it Yourself »

Space Between Links

Tip: Add the margin property on the off chance that you would prefer not to bunch the page links:

Example

ul.pagination li a {
    edge: 0 4px;/* 0 is for best also, base. Don't hesitate to transform it */
}
Try it Yourself »

Pagination Size

Change the measure of the pagination with the font-size property:

Example

ul.pagination li a {
    text dimension: 22px;
}
Try it Yourself »

Centered Pagination

To focus the pagination, fold a holder component over it (like <div>), and include text-align:center

Example

div.center {
    content adjust: center;
}
Try it Yourself »

More Examples


Breadcrumbs

Another variety of pagination is supposed "breadcrumbs":

Example

ul.breadcrumb {
    cushioning: 8px 16px;
    list-style: none;
    foundation shading: #f4b841;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    cushioning: 8px;
    shading: black;
    content: "/\00a0";
}
Try it Yourself »