<div class="wrapper">
<a href="#" class="image-nav-button prev">← Prev Image</a>
<a href="#" class="image-nav-button next">Next Image →</a>
</div>
.image-nav-button:focus {
outline: none;
}
.image-nav-button:focus-visible {
outline: 3px solid #E52733;
}
.wrapper {
background: black;
text-align: center;
width: 460px;
height: 200px;
padding: 40px;
box-sizing: border-box;
}
.image-nav-button {
color: white;
text-decoration: none;
font-size: 20px;
line-height: 1em;
}
.next {
float: right;
}
.prev {
float: left;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.