.demo{ background-color: #0abde3; } .pagination-outer{ text-align: center; } .pagination{ font-family: 'Noto Sans', sans-serif; display: inline-flex; position: relative; } .pagination li a.page-link{ color: #fff; background-color: transparent; font-size: 22px; font-weight: 600; line-height: 39px; height: 44px; width: 44px; padding: 0; margin: 0 15px 0 0; border: 2px dashed rgba(255,255,255,0.5); position: relative; z-index: 1; 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: #03a0bf; background-color: transparent; border-color: #fff; } .pagination li a.page-link:before{ content: ''; background: #fff; height: 28px; width: 28px; border-radius: 50%; transform: translateX(-50%) translateY(50%) rotateX(90deg); transform-origin: top center; position: absolute; bottom: 50%; left: 50%; z-index: -1; transition: all 0.3s; } .pagination li.active a.page-link:before, .pagination li a.page-link:hover:before, .pagination li.active a.page-link:hover:before{ transform: translateX(-50%) translateY(50%) rotateX(0); } @media only screen and (max-width: 480px){ .pagination{ margin: 0; display: block; } .pagination li{ display: inline-block; margin: 0 0 10px; } }