iOS engineer who likes clean, simple designs and sans-serif.

Loading

Down Arrow as Text

Quick neat thing I learned today:

Earlier, we made a design decision that we didn’t want to confuse the interaction of our “call to action buttons” with our “in-page anchor links”.

We wanted an “on-brand” way to give a subtle arrow-like effect, without having a bright neon flashing sign saying “there’s more” or “scroll down”.

I started googling “text arrows” for inspiration and somehow ended up on this Stack Overflow article for arrows.

▲ ▲
▼ ▼
↑ ↑
↓ ↓

Booyah! This was a neat simple way to achieve this (for now).

But… our designers wanted to make the arrow line up with the font x-height. Turns out we can just use font-size to scale it with the text. And then push the arrow away from the text with margin-left.

Easy, clean and simple. Here’s the code we used:

CSS

.downarrow-text {
  font-size: 64%;
  margin-left: 0.4rem;
}

HTML

<p>
  <a href="#eligible-courses">
     Learn More
     <span class="downarrow-text">
       &#x25BC;
     </span>
  </a>
</p>

Screenshot

It could easily be used in a drop-down button as well.

Anchor link with text down arrow

Leave a Comment