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:
It could easily be used in a drop-down button as well.
You must be logged in to post a comment.
Receive notifications of new posts by email.
2015 © Objective Li Labs LLC