<button class="button">
<div class="button__arrow button__arrow--up"></div>
...
</button>
<button class="button">
...
<div class="button__arrow button__arrow--right"></div>
</button>
<button class="button">
<div class="button__arrow button__arrow--down"></div>
...
</button>
<button class="button">
<div class="button__arrow button__arrow--left"></div>
...
</button>
.button {
align-items: center;
display: flex;
justify-content: center;
padding: 8px;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--up {
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 {
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 {
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 {
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);
}