Responsive buttons for post navigation
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:

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


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.