Pagination style 12
A pagination is an ordinal number of pages located at the bottom of the pages. But this snippet can be used for the pagination or navigation which is located at the top of the page. This is designed in such a way that it can engage the users with its animation. The HTML markup is simple using a pagination component of Bootstrap and font of Roboto. The Pagination component of Bootstrap wrappers the page-item and page-links with aria-label for next and previous items. The animation is taken care of by CSS selectors. The selectors ::first-child and ::last-child signifies the previous and next element which has the same type of styling with respect to the color font and mouse hovering. The elements apart from the first and last elements have a certain type of animation once they are hovered or active. The transform properties and translate properties create the magic of the animation for the elements.