• Tutorials
• Web Design

Create a Beautiful CSS Button for Print – Tutorial

Buttons are the main point of entry for users. They need to be inviting, exciting and just begging to be clicked on. But to focus only on the interactive elements of buttons – their active and hover states, for example – is to neglect another fairly widespread way that websites move from person to person – via personal printed recommendation. So what can you do to ensure that your buttons look just as good on paper as they do in-browser? We’ll take a look.

The HTML.

You can put that anywhere in the body of your document. Next up, let’s have a look at the CSS.
To style a button correctly, we need to consider what kinds of colour scheme are going to work in print. If you’ve sorted your print styles correctly, you’ll have stripped out all background images on the site when printed, to save your poor users their ink (most browsers will do this automatically). So white is going to be a part of your colour scheme, no matter what. Working with this, let’s pick a dark colour for our button. We’re also going to round the edges, as that makes a much more appealing, pressable button.

The CSS.

 
That might seem like an awful lot of code, but you can strip out things you don’t think you’ll need. You should also consider the kind of printer that your user might use. In Q4 2009, 70% of printers shipped were inkjet printers (23.8 million of the 34 million shipped), so it’s a fair bet to say your users will in the main use them. This means you should be prepping your button for printing with ink, such as HP Ink or Dell Inkjet Ink. Using Dell Inkjet Ink as an example, we can draw a few conclusions. Firstly, vibrant colours are best. Muted colours will blend in to the paper background. Secondly, liberal use of borders is valid. The black reproduction from this kind of ink is far superior to laser toner ink, and so will delineate the button – the important action access point for your users – from the rest of the printed page.

About the Author:
Natalie Smith studied International Relations in Glasgow, and currently works for a digital consulting firm in London. She writes tech and web design articles in her spare time, and also loves trying out new gadgets and reading the entertaining prose of P.G. Wodehouse and David Sedaris, her two favorite authors.