To style buttons, use the base styling with the "button" class and add classes to define different styles. This makes styling buttons easier and improves workflow. It is important to maintain the base button styling to make sure you aren't overwriting this styling other places.

Divesite Buttons

The buttons on our pub sites are squared off and have a box shadow. See the base styling below:

.button {
    background-color: $primary-color; // default button color
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.15), 0 1px 5px 0 rgba(0,0,0,0.1), 0 3px 1px -2px rgba(0,0,0,0.2);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    margin: 0;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: box-shadow 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    -webkit-appearance: none;
    &:hover {
        background-color: lighten($primary-color, 5%);
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 7px 0 rgba(0, 0, 0, 0.13), 0 3px 1px -1px rgba(0, 0, 0, 0.23);
        color: #fff;
        text-decoration: none;
    }
}

All divesite buttons have the shadow and same base code but the color can change.

HTML

<button class="button">Default Button</button>
<button class="button sponsored">Sponsored Button</button>
<button class="button black">Black Button</button>
<button class="button grey">Grey Button</button>

Rendered Code




Outline Buttons

On other sites (not divesite), outlined buttons are used.

.button {
    &.outline {
        background-color: transparent; 
        border: 1px solid $dive-black; 
        box-shadow: none; 
        color: $dive-black; 
        &:hover {
            background-color: $dive-black; 
            color: #fff; 
        }
        &.rounded {
            border-radius: 6px; 
        }
    }
}

Demo:

HTML

<button class="button outline">Outline Button</button>
<button class="button outline rounded">Rounded Button</button>

Rendered Code