Arrow buttons

<!-- Up arrow button -->
<button class="button">
<!-- Arrow -->
<div class="button__arrow button__arrow--up"></div>
<!-- Content -->
...
</button>
<!-- Right arrow button -->
<button class="button">
<!-- Content -->
...
<!-- Arrow -->
<div class="button__arrow button__arrow--right"></div>
</button>
<!-- Down arrow button -->
<button class="button">
<!-- Arrow -->
<div class="button__arrow button__arrow--down"></div>
<!-- Content -->
...
</button>
<!-- Left arrow button -->
<button class="button">
<!-- Arrow -->
<div class="button__arrow button__arrow--left"></div>
<!-- Content -->
...
</button>
.button {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
}
.button__arrow {
/* Transparent background */
background-color: transparent;
/* Size */
height: 12px;
width: 12px;
}
.button__arrow--up {
/* 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);
}
.button__arrow--right {
/* 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);
}
.button__arrow--down {
/* 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);
}
.button__arrow--left {
/* 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);
}

See also

Close button

Popover arrow

Triangle buttons