csslayout/contents/previous-next-buttons.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Previous next buttons	Create previous and next buttons with CSS flexbox	css flexbox, css pagination

HTML

<div class="previous-next-buttons">
    <!-- Previous link sticks to the left -->
    <div class="previous-next-buttons__nav">
        <a class="previous-next-buttons__button previous-next-buttons__button--l"></a>
    </div>

    <!-- Next link sticks to the right -->
    <div class="previous-next-buttons__nav">
        <a class="previous-next-buttons__button previous-next-buttons__button--r"></a>
    </div>
</div>

CSS

.previous-next-buttons {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

You can use the arrow buttons to create the previous and next buttons.

{% demo %}{% include "covers/previous-next-buttons.njk" %}{% enddemo %}