--- 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 %}