csslayout/contents/button-with-icon.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Button with icon	Create an icon button with CSS flexbox	css flexbox, css icon button

HTML

<button class="button-with-icon">
    <!-- Icon -->
    ...

    <!-- Label -->
    <div class="button-with-icon__label">...</div>
</button>

CSS

.button-with-icon {
    /* Center the content */
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.button-with-icon__label {
    margin-left: 0.5rem;
}

{% demo %} {% include "covers/button-with-icon.njk" %} {% enddemo %}