<div class="wrapper">
<a href="#" class="image-nav-button prev">&larr; Prev Image</a>
<a href="#" class="image-nav-button next">Next Image &rarr;</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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.