1. Web Design
  2. UX/UI
  3. Design Theory

Principles for Successful Button Design

Scroll to top
Read Time: 8 min

Here are ten quick and simple things that I always think about when designing buttons. These are simple, general design principles that can go a long away in optimizing your UI designs.

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.

button design on dribbblebutton design on dribbblebutton design on dribbble
Button design on Dribbble

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.

image of buttons with different colours, shapes, patterns etcimage of buttons with different colours, shapes, patterns etcimage of buttons with different colours, shapes, patterns etc
Shape, color, texture, pattern and typography all offer creative options

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”.

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.

image of buttons showing contrastimage of buttons showing contrastimage of buttons showing contrast
Important buttons need contrast

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.

image showing how de-emphasizing other elements elevates the buttonimage showing how de-emphasizing other elements elevates the buttonimage showing how de-emphasizing other elements elevates the button
De-emphasize other UI elements to elevate the button

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.

image showing clean versus dirty borders on buttonsimage showing clean versus dirty borders on buttonsimage showing clean versus dirty borders on buttons
Clean versus dirty borders on button designs

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.

image showing drop shadows on buttonsimage showing drop shadows on buttonsimage showing drop shadows on buttons
Softer or zero blur shadows work equally well on lighter and darker backgrounds

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.

image showing icon usage on buttonsimage showing icon usage on buttonsimage showing icon usage on buttons
The first button may take the user to another page; the second would appear to reveal hidden content

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.

Image showing primary, secondary, and tertiary button designsImage showing primary, secondary, and tertiary button designsImage showing primary, secondary, and tertiary button designs
A range of button styles in your toolbox is really useful

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!

Feedback states on button designFeedback states on button designFeedback states on button design
I suggest higher contrast than these, but subtle changes can still provide an elegant solution


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!

30 Minutes

Better Button Design in 30 Minutes

Learn better button design in this short course. Adi Purdila will explore UI design principles, best practices, and some things you should avoid when designing buttons. 

    1.3 Hours

    UI Design for Beginners

    In this UI Design tutorial, we’re going to be jumping into Adobe XD, focusing on UI design for beginners (you can use other UI design tools, like Figma, to follow along too).

      5.3 Hours

      Web Design for Beginners

      If you're new to web design, this course on web design for beginners will teach you everything you need to know.

        Did you find this post useful?
        Want a weekly email summary?
        Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
        Looking for something to help kick start your next project?
        Envato Market has a range of items for sale to help get you started.