Building a better button

A personalised card manufacturer (with a ‘pork-related’ name) have recently rebranded with a swanky new site. The brand is a huge step forward and there’s some really nice parts to the online shop.

As part of the fun new brand direction, they’ve created some ‘hyper-illustrated’ buttons, a style which is pretty popular at the moment. Unfortunately, these buttons were created with images.

Not the end of the world I hear you cry, sometimes the design requires an image!

I accept there are definitely times when an image is required to fulfil the design requirements – we’ve all done it! But there are also ‘better’ ways of implementing said images. This image was not only low resolution and pixelated on retina monitors, it wasn’t accessible – the alt attribute was set as ‘theme 1’ and there was no supplementary copy to go with the link.

This points to a wider issue: using images in place of content. There are some pretty big drawbacks:

The solution

I wanted to see how possible it would be to make a CSS equivalent of this image. After 15 minutes of work in Codepen, I’d come up with the following:

See the Pen Moonpig – how to do buttons by Trys Mudford (@trys) on CodePen.

This works pretty nicely, it scales well, it responds to hover and active interactions, the colours can be changed and the content can be updated without disturbing the designer for the original image.

Sharing the code

It’s pretty normal for an agency to dissect and discuss a rebrand/redesign of a large company, it keeps us sharp and gives us an idea of current trends. We’re also keen not to jump on the brandwagon and dismiss someone’s work without knowing the brief. For that reason, we rarely express our opinions publicly. However, in this instance, the accessibility impact of these buttons seemed to justify tipping them off to the problem. Hopefully a more accessible solution will be deployed in the near future.

Share this
Trys Mudford

About Trys Mudford

Trys Mudford is Lead Developer at Tomango and is responsible for the majority of our website development. An expert in responsive design and UX, he's also an extremely talented photographer and loves cats and playing the guitar.

Read more posts by Trys Read Trys's bio