GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

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 #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateY(25%) rotate(45deg);
}

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

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

.arrow-button--l {
/* Edges */
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translateX(25%) rotate(45deg);
}
Demo
Follow me on and to get more useful contents.