The button. One of the most fun, pretty and integral parts of any interface.

I love buttons because they’re so easy to get right. But, as you probably know, they often suck real bad. Everyone has their own style, but there are four basic types of buttons popular today that every designer should be familiar with.

Today I want to share with you the techniques I use to create different types of buttons for my designs.

Clean

The stylish, awesome button. Gradients, inner shadow, the whole shabang. How is it achieved?

Clean Buttons example
  • Gradient. Not too harsh. Never overdo the gradient, keep it simple, using just 2 swatches, from 0% to 100%.
  • Inner shadow. 1px, 0px 0px. Very easy, very clean. What colour? Well, either 100% with a lighter colour from the button, or just choose white and lower the opacity.
  • A tiny drop shadow, I usually go for 1px, 0px, 3px, to make it stick out from the page.

Simple

Sweet and simple. Thanks to products like Rdio and Kickstarter, the flat button has become really popular recently in interface design. How do you get this effect?

simpel buttons example
  • No gradient. A single flat colour. Gradients can go super wrong with flat designs. For example, hover over the buttons on this Microsoft website, and you’ll see what I’m talking about.
  • The stroke is up to you. I prefer to go without, though there is no issue with giving it a 1px/2px border.
  • No text shadow. The button is flat, therefore giving the text a shadow would give the misleading effect that the text is protruding from the button.

Glossy

Ever seen one of Metalab’s products, such as Flow or Ballpark? Also, if you use any iOS or OSX product, you’ll recognize this shiny, sharp button style.

glossy buttons example
  • The main difference between the Glossy button and the ‘Clean’ button is the gradient. I use 4 swatches. One at 1%, the next at 49%, the next at 50% and the last at 100%. This creates the effect of the top half as a positive gradient, going from light to dark, and the bottom half the opposite of this.
  • The second difference is an enhancement of highlights and shadows – an increased opacity of the inner shadow, text shadow and drop shadow.

Soft

The fourth and final style is one of my personal favourites. I love using it with neutral colours on neutral backgrounds. Tumblr use it, and so do several awesome designers such as Drew Wilson and Didi Medina.

soft buttons example
  • Three swatch gradient. 0%, 15% and 100%. For 100%, choose the main colour of the button you want, this will be the base. 15%, choose a slightly darker variation of the color used at 100%. Then, at 0%, use a noticeably darker colour from 15%, creating a soft gradient effect.
  • A drop shadow also adds to the darkened effect at the bottom of the button, for lighter colours I usually use #010101 at 10%, and for darker colours I’ll knock it up to 25-30%.

Hopefully these instructions are as simple to follow as a button is to create!

Feel free to ignore me and just jump straight into the PSD, if you wish (see below). Some final tips to keep in mind when you’re designing any kind of button:

  • Use lots of contrast between the button and text colors! Nothing worse than struggling to read a CTA.
  • Be consistent, don’t change different button styles throughout your product.
  • Padding. Make sure the button is aligned vertically and horizontally. Also, give the text some space to breathe. No one likes a cramped button.

Grab the PSD by clicking here.

Discover and implement your big idea with our product team

Get in Touch
Close