CSS peddle instance

In this section, we'll show you how to create peddle instances by using CSS.

Simple plying

If your site has many pages, you'll need to use pedding to navigate each page.

The following example shows how to use HTML and CSS to create peddles:

CSS instance

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li { display: inline; }

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

Try it out . . .

Click and hover over the peddling style

If you click on the current page, .active to style the current page, and mouse over can :hover selector to modify the style:

CSS instance

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover:not(.active) { background-color: #ddd; }

Try it out . . .

CSS instance

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd; }

Try it out . . .

Fillet style

You border-radius property to add fillet styles to selected page numbers:

CSS instance

ul.pagination li a {
border-radius: 5px;
}

ul.pagination li a.active {
border-radius: 5px;
}

Try it out . . .

Hover transition effect

We can add a transition when we move the mouse to the page number by adding the transition property to the page links to create a transition effect on hover:

CSS instance

ul.pagination li a {
transition: background-color .3s;
}

Try it out . . .

Page with a border

We can border property to add bordered pages:

CSS instance

ul.pagination li a {
border: 1px solid #ddd; / * Gray */
}

Try it out . . .

Fillet border

Tip: Add fillets to the first and last peddle links:

CSS instance

.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

Try it out . . .

Peddle intervals

Tip: You can use margin property to add spaces directly to each page number:

CSS instance

ul.pagination li a {
margin: 0 4px; / * 0 is for top and bottom. F eel free to change it */
}

Try it out . . .

The peddle font size

We can use font-size property to set the font size of the page:

CSS instance

ul.pagination li a {
font-size: 22px;
}

Try it out . . .

Center peddle

If you want to center the peddling, you can add the text-align:center style on the container element (e.g.

CSS instance

div.center {
text-align: center;
}

Try it out . . .

More instances

CSS instance

Try it out . . .

Breadcrumbs navigation

The other type of navigation is breadcrumb navigation, as follows:

CSS instance

ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}

ul.breadcrumb li {display: inline; }

ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

Try it out . . .

CSS peddle instance

Table of contents