csslayout/contents/arrow-buttons.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Arrow buttons	Create arrow buttons with CSS	css arrow buttons

HTML

<!-- Up arrow button -->
<button class="arrow-buttons">
    <!-- Arrow -->
    <div class="arrow-button arrow-button--t"></div>

    <!-- Content -->
    ...
</button>

<!-- Right arrow button -->
<button class="arrow-buttons">
    <!-- Content -->
    ...

    <!-- Arrow -->
    <div class="arrow-button arrow-button--r"></div>
</button>

<!-- Down arrow button -->
<button class="arrow-buttons">
    <!-- Arrow -->
    <div class="arrow-button arrow-button--b"></div>

    <!-- Content -->
    ...
</button>

<!-- Left arrow button -->
<button class="arrow-buttons">
    <!-- Arrow -->
    <div class="arrow-button arrow-button--l"></div>

    <!-- Content -->
    ...
</button>

CSS

.arrow-button {
    /* Transparent background */
    background-color: transparent;

    /* Size */
    height: 12px;
    width: 12px;
}

.arrow-button--t {
    /* Edges */
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(25%) rotate(45deg);
}

.arrow-button--r {
    /* Edges */
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(-25%) rotate(45deg);
}

.arrow-button--b {
    /* Edges */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-25%) rotate(45deg);
}

.arrow-button--l {
    /* Edges */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(25%) rotate(45deg);
}

{% demo %} {% include "patterns/arrow-buttons.njk" %} {% enddemo %}