---
layout: layouts/post.njk
title: Arrow buttons
description: Create arrow buttons with CSS
keywords: css arrow buttons
---
## HTML
```html
```
## CSS
```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 %}