HTML
<div class="flex items-center justify-center pa4">
<a href="#0" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box mr4">
<svg class="w1" data-icon="chevronLeft" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronLeft icon</title>
<path d="M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z"></path>
</svg>
<span class="pl1">Previous</span>
</a>
<a href="#0" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box">
<span class="pr1">Next</span>
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronRight icon</title>
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
</svg>
</a>
</div>
css
.border-box {
box-sizing: border-box;
}
.ba {
border-style: solid;
border-width: 1px;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.w1 {
width: 1rem;
}
.black {
color: #000;
}
.hover-white:hover {
color: #fff;
}
.hover-white:focus {
color: #fff;
}
.hover-bg-black:hover {
background-color: #000;
}
.hover-bg-black:focus {
background-color: #000;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.pl1 {
padding-left: .25rem;
}
.pr1 {
padding-right: .25rem;
}
.mr4 {
margin-right: 2rem;
}
.no-underline {
text-decoration: none;
}
.f5 {
font-size: 1rem;
}
.bg-animate, .bg-animate:hover, .bg-animate:focus {
transition: background-color .15s ease-in-out;
}