georgia georgia - 1 month ago 6
CSS Question

create an arrow using css

Is there any way to create an arrow like that in the following button, using CSS?

arrow button

I know how to create triangle-like arrows like this

#triangle_arrow {
top: 3pt;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid black;
border-top: 0.1em solid black;
transform: rotate(45deg);
}


but that line towards the arrow's corner is confusing me!

Answer

Fortunately for you, the → HTML entity exists, meaning you don't need to faff around with CSS triangles and instead can simply use content within a pseudo-element:

button {
  background: #0898b8;
  border: 1px solid #0898b8;
  color: white;
  line-height: 24px;
  padding: 6px 12px;
}

span::after {
  content: '→';
  font-size: 18px;
  margin-left: 4px;
}
<button>
  <span>Next</span>
</button>