Responsive buttons for post navigation

Question

I have tried to make two buttons to be used for post navigation below each post on a blog:

It works, however - it feels like to much code and classes for so little. I'm using Bootstrap 4, alpha 6. Is there any easier way to make something like this?

HTML:

<div class="container m-5 d-flex flex-md-row align-items-start align-items-stretch hidden-print">
  <div class="d-flex justify-content-start col-6">
    <a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
    <button type="button" class="btn btn-secondary btn-navigation mr-2 bg-gray-900 text-muted border-0 rounded-0">Previous
   <br>
      <a href="#" class="wordwrap">The title of the previous post</a>
   </button>
  </div>

  <div class="d-flex justify-content-end ml-auto col-6">
    <button type="button" class="btn btn-secondary btn-navigation bg-gray-900 text-muted border-0 rounded-0">Next
   <br>
      <a href="#" class="wordwrap">The title of the next post. It might be long. Very very long</a>
   </button>
    <a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </div>
</div>
</div>

CSS:

.wordwrap {
  white-space: normal;
}

.bg-gray-800 {
  background-color: #dfdfdf;
}

.bg-gray-900 {
  background-color: #efefef;

}

CodePen with the code

Answer 1

Having an a element inside a button element is not valid. You can’t nest "interactive" elements.

As these are links (navigating to resources) and not buttons (changing state), you should use the a element instead of the button element.

When using a, you could use the next and prev link types.

Using the br element in this context is possibly not appropriate. It must only be used for meaniningful line breaks. But if you can’t use a colon to separate the label from the title (e.g., for text browser users), using br might make sense.

You could use the cite element for the titles of the linked posts.

So the plain HTML could look like this:

<a href="#" rel="prev">Previous: <cite>The title of the previous post</cite></a>
<a href="#" rel="next">Next: <cite>The title of the next post. It might be long. Very very long</cite></a>

If you need additional elements for your font-based icons, you should use the span element instead of the i element. The meaning of i doesn’t cover decorative icons.

Answer 2

Based on review from @unor, I have updated code. The code is cleaner, some more work for me on expanding the background color behind the arrows to expand to the border.

HTML:

<div class="m-2 post-navigation d-flex">
  <a href="#" rel="prev" title="Navigate to the previous post" class="btn bg-gray-950 m-1 col-6 d-flex align-items-stretch rounded-0">
    <span class="fa fa-lg fa-chevron-left d-flex align-items-center mx-2" aria-hidden="true"></span> 
    The title of the previous post
  </a>


  <a href="#" rel="next" title="Navigate to the next post" class="btn bg-gray-950 m-1 col-6 d-flex align-items-stretch flex-row-reverse">
    <span class="fa fa-lg fa-chevron-right d-flex align-items-center mx-2" aria-hidden="true"></span> 
    The title of the next post. It might be long. Very very long
  </a>
</div>

CSS:

.post-navigation a{
  white-space: normal;
}

.post-navigation span{
  background-color: #dfdfdf;
  color: #222222;
}

.bg-gray-950 {
  background-color: #f2f2f2;

}