Buttons are still an important part of the User Experience. Despite literally anything on screen have the potential to be a link, users still expect a button to press. This is why so many emails you read have a big button at the bottom - because users like to have somewhere to focus their thumbs.

Making buttons is relatively straight forward. In fact, it’s essentially just a colored in element that links to somewhere. In this tutorial we’ll first build the HTML bit (really easy) and then beautify it in a few ways using CSS (also really easy).

By the end of the tutorial you’ll have made something that is distinctly buttony. Specifically:

1. It is big, commands attention, and is prominent.
2. Is a different color to the other elements.
3. That’s about it??

Creating a basic button

What a lot of web developers don’t tell you is that most of this stuff is actually already done for us. HTML has a pre-built button tag which tells your browser something is a button, meant to be clicked. Awesome. It’s as simple as:

This gives you a basic-as-hell button that looks like this:

Pretty painless so far. Next step is to add a destination. Normally buttons take you to somewhere. In time honored internet tradition, this button will forever take someone to cats. Lots of cats. So we’ve got to add in an anchor tag. Our button element now looks like this:

Styling the button

To be honest, the best way to style the button is to just write the rule and show you in code, so that’s exactly what I’ll do. Before we get there though, the key things you’ll need to keep an eye out for are:

• display: block; makes the <a> element fill its parent, so the whole button is clickable.
• padding: X%; adds in the space around the text, making it clearly a button with a large clickable area

This are the two rules that make our button feel most like a button. All the other stuff can change depending on your needs.

I’m going to do this by adding a class to my button so I can have different buttons on a page, but you could also create the CSS rules directly for <button>.

And here’s the full CSS rules to make a nice big purple button that takes you directly to cats.

Which gives you a button that looks like this:

See the Pen Buttons by Ed Gordon (@edwardcgordon) on CodePen.

That’s it really. Next steps you could take after here mostly just come down to design - color, size, font, placement. You can even set a background-image to be a cat. Like most things with CSS, the key part of making a button is knowing exactly what you’re trying to make!