Situated for the sites which are indulged in reading and eBooks, the pagination is also displayed like a box, similar to a book. With its style displayed as a book, each link is not attached. To do this a margin is set for 8px which creates space between each link. The outline is added to links looking for a book. Once you click or activate the link, the outline is changed into dotted lines with the outline offset of -2px. Liner-gradient and box-shadow are also set using the: after selector, but as the background is dark it is less likely visible. Along with the links, the previous and next links are having the same animation effect. Before using change the background color to see the shadow effects of the links. This is one of the best pagination snippets which can blend with any websites preferably can be used for e-books sites.
For the website loaded with animations, here is an example of pagination where each link is fully loaded with animation. The HTML is similar to any page navigation, except for the animation seen below the page links and previous, next links. The pagination component of bootstrap is used to create a wrapper for the page-links and page-items. The page-link is set with exact spacing and transition property. The clicking and hovering on links set the clip-path to assign a complex shape by clipping an element to a basic shape to the polygon. The transition set enables the smoothness in the effect. The hovering on previous and next also sets the transform property to rotate for 1 complete turn. This can be easily integrated on any website. This is one of the most eye-catching snippets.
This is the best example for the stylish yet simple and neat looking pagination design. This design gives an elegant look due to the circular shapes designed for page links and yet is stylish due to the animation effect assigned while clicking or hovering on the page links. The markup of HTML is simple with the pagination class of Bootstrap wrapping the links and lists of the pagination. The animation effect is based purely on CSS. The pagination is styled with border-radius which gives a unique structure for all the pagination links. The circular shape of the page-link creates a shadowed button, when active or hovered. Along with it, a gradient is set along with the circular shape. This is set by using:: before selector for page-link. The animation effect for previous and next links are the same as all other links. The bold and stylish look can be integrated into any website.
Nowadays the website rarely has only one page displayed. With multiple pages to display it is necessary to have pagination either on top or bottom. This one example is an eye-catcher design of pagination. With its perfect links placed on the pagination component of the Bootstrap, this gives a unique look when the hover event is activated. The classes are well-styled using CSS and animation is handled by the selectors effectively. The page-link is well designed to fit in the pagination wrapper. Once you select or click on any page-link, the selector: before plays a role to set the border with 25px and transform property sets the rotation 360 degrees. A style for first and last child is set with light-height 45px and border-radius to give the unique structure at the beginning and end of the pagination.
This is a simple animation effect, with a well-designed CSS the snippet takes care of the animation which is an attention grabbing pagination design. HTML mark uses the Bootstrap pagination along with the classes for the list. The page-link is well placed using the CSS style sheet. The pagination class is displayed as inline-flex and set to a relative position whereas the page-links are styled to display the circle instead of normal square or rectangle. The transition set to page-links makes an easy to transit from one link to another. Next, styles take care of selectors like ::hover, ::before and :: after, these selectors are carefully designed to give the animation effect of the eclipse. Along with this effect the font color changes accordingly with the transition of 0.5 sec. Due to its simple code, you can use it with any website.