NCC Digital Design Guide

Button 

<!-- Default -->
<button class="">Button</button>


<!-- Button Secondary -->
<button class="button--secondary">Button Secondary</button>


<!-- Button Themed -->
<button class="button--alt">Button Themed</button>


<!-- Disabled Button -->
<button class="">Disabled Button</button>


<button class="{{modifier}}">{{button-text}}</button>
 
/* Default */
{
  "button-text": "Button"
}


/* Button Secondary */
{
  "button-text": "Button Secondary",
  "modifier": "button--secondary"
}


/* Button Themed */
{
  "button-text": "Button Themed",
  "modifier": "button--alt"
}


/* Disabled Button */
{
  "button-text": "Disabled Button"
}
  • Content: 
    button,
.button {
	display: inline-block; 
    vertical-align: middle; 
    font: inherit; 
    text-align: center; 
    margin:  0; 
    cursor: pointer; 
    overflow: visible; 
    @include rem-fallback(padding, $base-spacing-unit/4); 
    background-color: $brand-primary;
    border: none;
    border-bottom-width: 2px; 
    border-bottom-style: solid;
    border-bottom-color: darken($brand-primary,10%);
    color: $white;
    font-weight: bold;
    text-decoration: none;

    &:hover {
    	color: $white;
    	background-color: darken($brand-primary, 10%);
    }

    &:focus {
    	outline: 3px solid $highlight;
	}

	&:visited {
		color: $white;
	}

	+ p {
		margin-top: 1em;
	}

	&.btn-large {
		padding: .5em 1em;
		@include rem-fallback(font-size, $base-font-size*1.2);
	}
}

.button--secondary {
	@extend .button;
	background-color: $brand-secondary;
	border-bottom-color: darken($brand-secondary,10%);
	&:hover {
		background-color: darken($brand-secondary,10%);
	}
}

.button--alt {
	@extend .button;
	background-color: $brand-theme;
	border-bottom-color: darken($brand-theme,10%);
	color: $dark-grey;
	&:hover {
		background-color: darken($brand-theme,10%);
		color: $white;
	}
}

.button-group {
	margin-left: $grid-gutter*-1;
	.button {
		margin-left: $grid-gutter;
		margin-bottom: 1.5em;
	}
}
  • URL: /components/raw/button/_buttons.scss
  • Filesystem Path: src/patterns/patterns/buttons/button/_buttons.scss
  • Size: 1.3 KB

Button Pattern

The Button Secondary colour has been updated to reflect the confirmed $brand-secondary colour of #b65e00