Buttons

Default Button

The default button should be used for basic call to actions within the website. The colour of this button can be changed in the CSS.

Large button

                            HTML
                                <div class="design-preview design-preview-button">
        <a href="#" class="button">Large button</a>
    </div>
                            
                        

                            SCSS
                                .button {
        border-radius: 6px;
        background-color: $purple;
        color: white;
        font-weight: 700;
        padding: 16px 32px;
        border: 2px solid transparent;
    }

    .button:hover {
        background-color: white;
        border: 2px solid $purple;
        color: $purple;
    }
                            
                        

Ghost Button

This can be used alongside or separately to the default button. It is recommended to use the ghost button in a group with the default in a hero section.

Large button

                            HTML
                                <div class="design-preview design-preview-button">
        <a href="#" class="hollow button">Large button</a>
    </div>
                            
                        

                            SCSS
                                .button.hollow {
        border-radius: 6px;
        background-color: white;
        color: $purple;
        font-weight: 700;
        padding: 16px 32px;
        border-color: $purple;
    }

    .button.hollow:hover {
        background-color: $purple;
        color: white;
        border-width: 1px;
    }
                            
                        

Icon Button

An icon button can be used to help users understand the action they are about to take. An example would be a download icon paired with the word download. It helps users understand what is going to happen as a result of clicking the button.

Large button

                            HTML
                            <div class="design-preview design-preview-button">
    <a href="#" class="icon button">Large button<img src="images/Right-arrow.svg" alt="right arrow"/></a>
</div>
                            
                        

                            SCSS
                            .button.icon img {
    margin-left: 16px;
}

.button.icon:hover {
    background-color: $lightpurple;
    color: white;
    border-color: $lightpurple;
}
                            
                        

Dropdown Button

Dropdown buttons should be used when the user has 1 or more options to choose from. This is accompanied with a icon to direct users.

                            HTML
                            <div class="design-preview design-preview-button">
    <a href="#" class="dropdown button">Large button dropdown</a>
</div>
                            
                        

                            SCSS
                            .button.dropdown {
    border-radius: 6px;
    background-color: $purple;
    color: white;
    font-weight: 700;
    padding: 16px 32px;
}

.button.dropdown:hover {
    background-color: $lightpurple;
    color: white;
    border-color: $lightpurple;
}
                            
                        

Button Group

A button group can be used when buttons need pairing together. This could be because they are similar in action or content.

One Two

                            HTML
                             <div class="design-preview design-preview-button button-group">
    <a href="#" class="button">One</a>
    <a href="#" class="button">Two</a>
</div>
                            
                        

                            SCSS
                            .button {
    border-radius: 6px;
    background-color: $purple;
    color: white;
    font-weight: 700;
    padding: 16px 32px;
    border: 2px solid transparent;
}

.button:hover {
    background-color: white;
    border: 2px solid $purple;
    color: $purple;
}

.button-group {
    margin-bottom: 0;
}
                            
                        

Small Button

A small button has been created for the use of a button in a smaller design area.

Small button

                            HTML
                            <div class="design-preview design-preview-button">
    <a href="#" class="button small">Small button</a>
</div>
                            
                        

                            SCSS
                            .button {
    border-radius: 6px;
    background-color: $purple;
    color: white;
    font-weight: 700;
    padding: 16px 32px;
    border: 2px solid transparent;
}

.button:hover {
    background-color: white;
    border: 2px solid $purple;
    color: $purple;
}
                            
                        