Pagination style 7

.pagination-outer{ text-align: center; padding: 15px 0; } .pagination{ font-family: 'ABeeZee', sans-serif; display: inline-flex; position: relative; } .pagination li a.page-link{ color: #444; background-color: transparent; font-size: 23px; font-weight: 600; line-height: 42px; height: 42px; width: 42px; padding: 0; margin: 0 7px; border: none; border-radius: 50%; position: relative; transition: all 0.3s ease 0s; } .pagination li.active a.page-link, .pagination li a.page-link:hover, .pagination li.active a.page-link:hover{ color: #6c5ce7; background-color: transparent; box-shadow: 0 0 20px 5px #6c5ce7; } .pagination li a.page-link:before{ content: ""; background: #6c5ce7; width: 70%; height: 70%; opacity: 0; transform: translateY(-50%) translateX(-50%) scale(0.8); position: absolute; top: 100%; left: 50%; z-index: -1; -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0 75%, 0 0, 51% 25%); clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0 75%, 0 0, 51% 25%); transition: all 0.3s; } .pagination li.active a.page-link:before, .pagination li a.page-link:hover:before{ top: -17px; opacity: 1; } .pagination li:first-child a.page-link, .pagination li:last-child a.page-link{ color: #fff; background-color: #6c5ce7; border-radius: 0; -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); } .pagination li:last-child a.page-link{ -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); } .pagination li:first-child a.page-link:before, .pagination li:last-child a.page-link:before{ display: none; } .pagination li:first-child a.page-link:hover, .pagination li:last-child a.page-link:hover{ background-color: #404040; } @media only screen and (max-width: 480px){ .pagination{ display: block; margin: 0; } .pagination li{ margin: 10px 2px; display: inline-block; } } License Terms

This is a template of a page navigation button line, designed with CSS and HTML. The buttons are set to get highlighted and pointed with an arrow mark in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of font-family as 'ABeeZee', sans-serif, display as inline- flex, and position as relative. The button numbers have the styles of color as #444, background color as transparent, font size as 23px, font-weight as 600, line-height as 42px, transition of all 0.3s ease 0s, border radius of 50% to make the circles, and height and width as 42px. The text color will turn to #6c5ce7 in a focus event and the number button will get highlighted with a box shadow set as 0 0 20px 5px #6c5ce7. In a focus event, the transformation happens with translate (-50%) translateX (-50%) scale(0.8) style. The shape of the highlight event has been specified with a polygon element added to the code with WebKit-clip-path: polygon.

Pagination style 7

Post Comment or Questions Cancel reply