Skip to content

Components: buttons

A wee design system's library

Last updated on May 20, 2020—5 min read

Buttons #

A button is a distinct visual element where users can click or tap to trigger an action.

Guidelines

Use a <button> for actions, such as copy, expand, collapse or send. If the need is a change of location, use a link <a>. The proper use of their meaning as HTML elements results in a more inclusive experience. It also eases the maintenance and scaling of this design system.
Deliver every button with a precise text that states its purpose. In most cases, it should be a verb that incites action. You'll know it works when the user can predict the outcome before triggering the button.
Keep its content below four words to prevent text wrapping.
Use sentence case for the texts, which means that only the first word starts with a capital letter. Don't use a period in the end.
A primary button conveys the most prominent choice that the user can take in a section. For this reason, there should be only one per page. For supporting actions, pick a secondary button instead.
A button's colour changes depending on its surroundings. It may be any of the four shades picked from the colour palette, as long as it yields an accessible contrast. The shades are dark-accent, accent, light and dark:

#dd2808
#f96c53
#f8f8f8
#2f2f2f

Code snippets

Primary button

Light text (#f8f8f8) over a dark-accent box area (#dd2808), this is the default style for all buttons. It can only perform accessibly over a light-coloured background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn">This is a button</button>
                                
                                    CSS
                                    
                                

.btn {
    background-color: #dd2808;
    border: 2px solid transparent;
    border-radius: 3px;
    color: #f8f8f8;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn:hover {
    background-color: #a71e06;
}

Primary accent button

Dark text (#2f2f2f) over an accent box (#f96c53), this is an alternative style. It should only appear over a dark-coloured background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn bg--accent">This is a button</button>
                                
                                    CSS
                                    
                                

.btn {
    background-color: #dd2808;
    border: 2px solid transparent;
    border-radius: 3px;
    color: #f8f8f8;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn:hover {
    background-color: #a71e06;
}

.bg--accent {
    background-color: #f96c53;
    color: #2f2f2f;
}

button.bg--accent:hover {
    background-color: #fba798;
}

Primary dark button

Light text (#f8f8f8) over a dark box area (#2f2f2f), this is an alternative style. It should appear over a light or accent coloured background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn bg--dark">This is a button</button>
                                
                                    CSS
                                    
                                

.btn {
    background-color: #dd2808;
    border: 2px solid transparent;
    border-radius: 3px;
    color: #f8f8f8;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn:hover {
    background-color: #a71e06;
}

.bg--dark {
    background-color: #2f2f2f;
    color: #f8f8f8;
}

Primary light button

Dark text (#2f2f2f) over a light box area (#f8f8f8), this is an alternative style. It should only appear over a dark-coloured background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn bg--light">This is a button</button>
                                
                                    CSS
                                    
                                

.btn {
    background-color: #dd2808;
    border: 2px solid transparent;
    border-radius: 3px;
    color: #f8f8f8;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn:hover {
    background-color: #a71e06;
}

.bg--light {
    background-color: #f8f8f8;
    color: #2f2f2f;
}

button.bg--light:hover {
    background-color: #fcdad4;
}

Secondary button

A light box area (#f8f8f8) with dark-accent border and text (#dd2808), this is the main style for secondary buttons. It works better over a light-coloured background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn-sec">This is a button</button>
                                
                                    CSS
                                    
                                

.btn-sec {
    background-color: #f8f8f8;
    border: 2px solid #dd2808;
    border-radius: 3px;
    color: #dd2808;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn-sec:hover {
    background-color: #ffffff;
}

Secondary accent button

A dark box area (#2f2f2f) with accent border and text (#f96c53), this is an alternative style. It can work over a dark or light coloured background.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn-sec bd--accent">This is a button</button>
                                
                                    CSS
                                    
                                

.btn-sec {
    background-color: #f8f8f8;
    border: 2px solid #dd2808;
    border-radius: 3px;
    color: #dd2808;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn-sec:hover {
    background-color: #ffffff;
}

.bd--accent {
    background-color: #2f2f2f;
    border: 2px solid #f96c53;
    color: #f96c53;
}

button.bd--accent:hover {
    background-color: #1f1f1f;
}

Secondary dark button

A light box area (#f8f8f8) with dark border and text (#2f2f2f), this is an alternative style. It can work over a dark or light background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn-sec bd--dark">This is a button</button>
                                
                                    CSS
                                    
                                

.btn-sec {
    background-color: #f0f0f0;
    border: 2px solid #dd2808;
    border-radius: 3px;
    color: #dd2808;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn-sec:hover {
    background-color: #ffffff;
}

.bd--dark {
    border: 2px solid #2f2f2f;
    color: #2f2f2f;
}

Secondary light button

A dark box area (#2f2f2f) with light border and text (#f8f8f8), this is an alternative style. It can work over a dark background or contrasting image.

Here are a few examples of proper usage:

These are its code snippets:

                            
                                
                                    HTML
                                    
                                
<button class="btn-sec bd--light">This is a button</button>
                                
                                    CSS
                                    
                                

.btn-sec {
    background-color: #f8f8f8;
    border: 2px solid #dd2808;
    border-radius: 3px;
    color: #dd2808;
    cursor: pointer;
    font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
    padding: .5rem .75rem;
    text-decoration: none;
}

.btn-sec:hover {
    background-color: #ffffff;
}

.bd--light {
    background-color: #2f2f2f;
    border: 2px solid #f8f8f8;
    color: #f8f8f8;
}

button.bd--light:hover {
    background-color: #1f1f1f;
}

Sources of inspiration

A Complete Guide to Links and Buttons—CSS-Tricks
Atomic Design—Brad Frost
Buttons—Material Design
Buttons—PatternFly Design System
Buttons—Polaris Design System
Buttons in Design Systems—Nathan Curtis

See cards as a component