Pagination

PHP

<!-- Pagination -->
<ul class="pagination">
	<li class="pagination_arrow || pagination_arrow_prev">
		<a href="#"><?= svg('iconFastForward2','')?></a>
	</li>
	<li class="active"><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li class="pagination_arrow">
		<a href="#"><?= svg('iconFastForward2','')?></a>
	</li>
</ul>
						
<!-- Icon -->
<symbol id="iconFastForward2" viewBox="0 0 32 32">
	<path d="M30.997 13.575l-9.143-9.143c-1.34-1.34-3.509-1.34-4.848 0-1.339 1.337-1.339 3.511 0 4.848l6.718 6.72-6.718 6.718c-1.339 1.34-1.339 3.509 0 4.848 0.667 0.672 1.545 1.006 2.423 1.006s1.756-0.334 2.425-1.003l9.143-9.143c1.337-1.34 1.337-3.511 0-4.851z"></path>
	<path d="M14.996 13.575l-9.143-9.143c-1.34-1.34-3.509-1.34-4.848 0-1.339 1.337-1.339 3.511 0 4.848l6.718 6.72-6.718 6.718c-1.339 1.34-1.339 3.509 0 4.848 0.667 0.672 1.545 1.006 2.423 1.006s1.756-0.334 2.425-1.003l9.143-9.143c1.337-1.34 1.337-3.511 0-4.851z"></path>
</symbol>

CSS

.pagination{padding:1rem 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:0}
.pagination li{display:inline-block;vertical-align:top;padding:0;margin:.4rem;list-style:none}
.pagination li.active a{background-color:#09a5be;color:#fff;pointer-events:none}
.pagination li.pagination_arrow .icon{position:relative;top:-.2rem}
.pagination li.pagination_arrow_prev .icon{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.pagination li a{font-size:1.6rem;font-weight:700;display:block;min-width:3rem;height:3rem;line-height:3.2rem;padding:0 .5rem;background-color:#066978;color:#fff;text-align:center;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.pagination li a:hover{background-color:#09a5be;color:#fff}
}

@media only screen and (max-width: 767px) {
	.pagination{text-align:center}
}

SCSS

/* Vars */
$main:            #09a5be;
$dark:            #066978;
$white:           #ffffff;

.pagination {
	padding: 1rem 0;
	user-select: none;
	font-size: 0;
	
	li {
		display: inline-block;
		vertical-align: top;
		padding: 0;
		margin: .4rem;
		list-style: none;
		
		&.active {
			a {
				background-color: $main;
				color: $white;
				pointer-events: none;
			}
		}
		
		&.pagination_arrow {
			.icon {
				position: relative;
				top: -0.2rem
			}
		}
		
		&.pagination_arrow_prev {
			.icon {
				transform: rotate(180deg);
			}
		}
		
		a {
			font-size: 1.6rem;
			font-weight: 700;
			display: block;
			min-width: 3rem;
			height: 3rem;
			line-height: 3.2rem;
			padding: 0 .5rem;
			background-color: $dark;
			color: $white;
			text-align: center;
			transition: .3s linear;
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.pagination li a:hover {
		background-color: $main;
		color: $white;
	}
}

@media only screen and (max-width: 767px) {
	.pagination {
		text-align: center;
	}
}