Principles for Successful Button Design

There are a thousand ways to design and create buttons today and you only need to spend a small amount of time looking through work on dribbble to get a sense of them. A great deal of these examples are exactly the same, but occasionally there are the odd few that feel like they’ve had a little more care and attention in their making.

You may like to create your buttons straight in CSS, or you may like to head for your layout tool of choice, but it’s important to think carefully about how your button design lives in context.

It’s all too easy to simply reach for a pre-designed ui-elements.fig that some generous soul has shared for free. But why not take a moment to consider whether said button style is appropriate in the context of your design and consider if there’s room to create something a little more original?

Ask Yourself Some Questions

Recycling someone else’s buttons is fine, it saves time, but there’s no harm in taking a moment to understand the design and composition of your (or someone else’s) buttons in a little more detail.

• How are they designed?
• Do they fit the interface/context/brand?
• Is there an opportunity to create something unique?
• Are my buttons prominent enough?
• Do I need primary, secondary, tertiary buttons?
• Do they differ substantially enough from each other?
• Do they look slick?! (Why not, we all want to design cool looking stuff right?!).

10 Principles of Button Design

Here are my ten principles for designing buttons. I’m not going to give you ideas on how to use effects in Figma but instead share some simple, general design concepts you’ll be able to use in your own UI design.

1. Match Brand

It’s important that your buttons match their contextual style. This could mean fitting in with a color palette, graphical style or taking a lead from some form of brand guidelines or logo. Perhaps there are some prominent shapes, textures or design styles that you can pick up on. Maybe a logo has a circular aspect to it and you could pick up on this in your buttons or other potential calls to action.

If an interface predominately uses flat color then perhaps big shiny Apple-like buttons aren’t the way to go. If you can, take the opportunity to experiment with extending the brand through to the interface by using appropriate shapes, effects, coloring or other forms of embellishment.

2. Match Contextual Style

Following on from above, stop for a moment before opening the ui-elements.fig file. It’s easy to reach for grads, shadows, bevels etc. but take a moment to think whether it’s the right choice not just to match a brand but also the interface in which the buttons sit and whether they need to feel overly “buttony”.

• 

  What is Affordance in UI Design?

  

  Ian Yates

  09 Mar 2023

Buttons may need to feel particularly button-like within an app and on mobile, for example, but with websites maybe there’s room to do something a little different with your buttons or calls to action.

3. Ensure Buttons Have Enough Contrast

With so many interface designs being inspired by Apple OS styling, particularly in a lot of the UI Element PSD’s out there, buttons can get a little lost amongst other elements being used in the UI, diluting their potentially important power. Try using color, size, whitespace or typography to ensure your buttons have the visual weight they need to stand out from the rest of the interface.

4. Consider Rounded or Shapely Buttons

Following on from the above, if there are lots of other rounded corner UI elements in your design, consider using circular ended buttons or perhaps some other change in shape. This could give you an extra bit of contrast that ensures your important calls to action have the prominence they may need.

5. De-emphasise Secondary UI Elements

If you’re striving for an OS inspired style or you’re working with a predesigned elements UI kit then it’s likely your UI elements will predominantly be rounded corner rectangular in shape. Consider reducing the level of embellishment on elements that can afford to feel less “buttony”.

For example, bespoke select menus, segmented controls, custom menu triggers might all be the same rounder corner shapes but using less shadow, border, bevel, gradient or other effects can help to reduce their richness and in turn promote button styles.

6. Color Match Strokes/Borders

Most buttons we see out there have some form of border or stroke on them. Loosely speaking, if your button is darker than the background on which it sits use a dark stroke of the general button color. If the reverse is true then go for a stroke that’s a darker shade of the background color.

If you stick with the former and use it on a darker background I find it can make the button edges a little “dirty’” Using the latter can also help make your button really pop. I consider this to be a general design principle when dealing with strokes/borders in web design.

7. Be Careful With Blurred Shadows

Over the years I’ve always sworn by my “Shadow Law”. The Shadow Law states that drop shadows work best when an element is lighter than its background. If an element is darker than its background then drop shadows should be used very subtly. Similar to color matching strokes and borders, I very much consider this to be a general design principle that applies to all UI elements.

8. Subtle Iconography Can Give Affordances

As well as being another small detail that can further differentiate your buttons from similar UI elements, the use of simple iconic elements such as arrows can give some sense of action and a small affordance as to what happens when a user clicks.

For example, an arrow pointing right after the text on a button maybe gives the user some sense of moving on or leaving the page. An arrow pointing down might suggest that some content will be progressively disclosed below, or perhaps some kind of menu will open.

9. Consider Primary, Secondary and Tertiary Styles

If you’re designing an interface where there are consistently lots of actions and functionality on display it may be important to establish some visual language with your buttons by establishing primary, secondary, tertiary and potentially more styles.

Consider reserving the strongest and boldest color for your primary buttons and using progressively less strength or saturation as you reduce importance. As well as color and shade, consider reducing size, whitespace, text size and level of embellishment to further reduce the visual weight of buttons that aren’t primary.

10. Always Make Feedback States

This is a no brainer really, but is often something considered toward the end of the design process. Always work through the core states required for your buttons to ensure they provide the user with sufficient feedback in their context. Users will likely have a mental model of how a button works in the real world as they use it through its various states. Some simple CSS tweaks with shadows, border and gradients and the like can give the user some simple feedback and a touch of eye candy!

Conclusion

As designers you’ll all have your own process you go through. I’ll bet a lot of the time that can involve moving your head back from the screen, tilting it slightly, squinting and saying “Yeah that’s about right!”. That’s part of the fun of designing of course and talented designers tend to get it right doing just that, but I think it’s always good to run a bit of internal commentary, interrogating and reasoning over the design decisions you’re making.

There’s no harm in re-using or leaning on pre-designed styles and UI elements, they can obviously save a lot of time. It may even be the case that someone has pixel-perfectly crafted exactly what you were looking for and is offering it for free. However, I don’t think there’s any harm in having a deeper understanding of the design process and craft behind what you’re creating and informing your design decisions going forward.

Learn UI Design

Check out these free courses from Tuts+, and don’t forget to subscribe to @envatotuts for more!