Button

Ready

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Base -->
<button class="button button--base">Base Button</button>


        
            <!-- Primary Button -->
<button class="button button--primary">Primary Button</button>


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


        
            <!-- Tertiary Button -->
<button class="button button--tertiary">Tertiary Button</button>


        
            <!-- Quarternary Button -->
<button class="button button--quarternary">Quarternary Button</button>


        
            <!-- Quinary Button -->
<button class="button button--quinary">Quinary Button</button>


        
            <!-- Small Button -->
<button class="button button--small">Small Button</button>


        
            <!-- Medium Button -->
<button class="button button--medium">Medium Button</button>


        
            <!-- Large Button -->
<button class="button button--large">Large Button</button>


        
            <!-- Massive Button -->
<button class="button button--massive">Massive Button</button>


        
            <!-- Negative Button -->
<button class="button button--negative">Negative Button</button>


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


        <button class="button button--{{ modifier }}">{{ label }}</button>


        
        
            /* Base */
{
  "order": 1,
  "modifier": "base",
  "label": "Base Button"
}


        
            /* Primary Button */
{
  "order": 2,
  "modifier": "primary",
  "label": "Primary Button"
}


        
            /* Secondary Button */
{
  "order": 3,
  "modifier": "secondary",
  "label": "Secondary Button"
}


        
            /* Tertiary Button */
{
  "order": 4,
  "modifier": "tertiary",
  "label": "Tertiary Button"
}


        
            /* Quarternary Button */
{
  "order": 5,
  "modifier": "quarternary",
  "label": "Quarternary Button"
}


        
            /* Quinary Button */
{
  "order": 6,
  "modifier": "quinary",
  "label": "Quinary Button"
}


        
            /* Small Button */
{
  "order": 7,
  "modifier": "small",
  "label": "Small Button"
}


        
            /* Medium Button */
{
  "order": 8,
  "modifier": "medium",
  "label": "Medium Button"
}


        
            /* Large Button */
{
  "order": 9,
  "modifier": "large",
  "label": "Large Button"
}


        
            /* Massive Button */
{
  "order": 10,
  "modifier": "massive",
  "label": "Massive Button"
}


        
            /* Negative Button */
{
  "order": 11,
  "modifier": "negative",
  "label": "Negative Button"
}


        
            /* Disabled Button */
{
  "order": 12,
  "modifier": "disabled",
  "label": "Disabled Button"
}

File:

Content:


                                // Button Sizes
$base-button-font-size: $font-size-med;
$base-button-vertical-padding: $base-input-font-size * 0.375;
$base-button-horizontal-padding: $base-input-font-size * 1.375;
$base-button-border-size: 2px;
$base-button-border-size--text: 3px;
$base-button-line-height: $base-line-height;

$fixed-button-width: 11.875rem;

$medium-button-font-size: $base-button-font-size;
$medium-button-vertical-padding: $base-button-vertical-padding;
$medium-button-horizontal-padding: $base-button-horizontal-padding;

$small-button-font-size: $base-font-size * 0.875;;
$small-button-vertical-padding: $base-input-font-size * 0.375;
$small-button-horizontal-padding: $base-input-font-size * 1.375;

$large-button-font-size: $base-button-font-size * 1.25;
$large-button-vertical-padding: $base-input-font-size * 0.375;
$large-button-horizontal-padding: $base-input-font-size * 1.375;

$massive-button-font-size: $base-button-font-size * 1.8;
$massive-button-vertical-padding: $base-input-font-size * 0.375;
$massive-button-horizontal-padding: $base-input-font-size * 2;


@mixin disabled {
  opacity: 0.3;
  filter: alpha(opacity=30); /* IE8 */
}

@mixin button {
  -webkit-font-smoothing: antialiased;
  border-radius: $button-border-radius;
  color: $base-button-text-color;
  display: inline-block;
  font-family: $lato;
  font-size: $base-button-font-size;
  font-weight: $font-weight-bold;
  line-height: $base-button-line-height;
  padding: $base-button-vertical-padding $base-button-horizontal-padding;
  text-decoration: none;
  border: $base-button-border-size solid $base-button-border-color;
  cursor: pointer;
  user-select: none;
  vertical-align: top;
  text-align: center;
  // text-transform: uppercase; // TODO this should go here (?) but without breaking things like accordions
  white-space: nowrap;
  width: auto;
  background-color: $base-button-color;

  @include appearance(none);

  &:hover, &:active, &:focus {
    background-color: $base-hover-button-color;
    color: $base-hover-button-text-color;
    border-color: $base-hover-button-border-color;
    text-decoration: none;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

// Button Types

@mixin primary-button {
  background-color: $primary-button-color;
  color: $primary-button-text-color;
  border-color: $primary-button-border-color;
  text-transform: uppercase;

  &:visited {
    color: $primary-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $primary-hover-button-color;
    color: $primary-hover-button-text-color;
    border-color: $primary-hover-button-border-color;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

@mixin secondary-button {
  background-color: $secondary-button-color;
  color: $secondary-button-text-color;
  border-color: $secondary-button-border-color;
  text-transform: uppercase;

  &:visited {
    color: $secondary-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $secondary-hover-button-color;
    color: $secondary-hover-button-text-color;
    border-color: $secondary-hover-button-border-color;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

@mixin tertiary-button {
  background-color: $tertiary-button-color;
  color: $tertiary-button-text-color;
  border-color: $tertiary-button-border-color;
  text-transform: uppercase;

  &:visited {
    color: $tertiary-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $tertiary-hover-button-color;
    color: $tertiary-hover-button-text-color;
    border-color: $tertiary-hover-button-border-color;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

@mixin quarternary-button {
  background-color: $quarternary-button-color;
  color: $quarternary-button-text-color;
  border-color: $quarternary-button-border-color;
  text-transform: uppercase;

  &:visited {
    color: $quarternary-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $quarternary-hover-button-color;
    color: $quarternary-hover-button-text-color;
    border-color: $quarternary-hover-button-border-color;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

@mixin quinary-button {
  background-color: $quinary-button-color;
  color: $quinary-button-text-color;
  border-color: $quinary-button-border-color;
  text-transform: uppercase;

  &:visited {
    color: $quinary-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $quinary-hover-button-color;
    color: $quinary-hover-button-text-color;
    border-color: $quinary-hover-button-border-color;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

@mixin negative-button {
  background-color: $negative-button-color;
  color: $negative-button-text-color;
  border-color: $negative-button-border-color;
  text-transform: uppercase;

  &:visited {
    color: $negative-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $negative-hover-button-color;
    color: $negative-hover-button-text-color;
    border-color: $negative-hover-button-border-color;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

@mixin text-button {
  background-color: $text-button-color;
  color: $text-button-text-color;
  border: 0;
  border-radius: 0;
  border-bottom: $base-button-border-size--text solid $text-button-border-color;
  padding-left: 0;
  padding-right: 0;
  margin-left: $base-button-horizontal-padding;
  margin-right: $base-button-horizontal-padding;
  text-transform: uppercase;
  white-space: pre-line;

  &:visited {
    color: $text-button-text-color;
  }

  &:hover, &:active, &:focus {
    background-color: $text-hover-button-color;
    color: $text-hover-button-text-color;
    border-color: $text-hover-button-border-color;
    outline: none;
  }

  &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {
    @include disabled;
  }
}

// Button Sizes

@mixin small-button {
  font-size: $small-button-font-size;
  padding: $small-button-vertical-padding $small-button-horizontal-padding;
}

@mixin medium-button {
  font-size: $medium-button-font-size;
  padding: $medium-button-vertical-padding $medium-button-horizontal-padding;
}

@mixin large-button {
  font-size: $large-button-font-size;
  padding: $large-button-vertical-padding $large-button-horizontal-padding;
}

@mixin massive-button {
  font-size: $massive-button-font-size;
  padding: $massive-button-vertical-padding $massive-button-horizontal-padding;
}

URL: /components/raw/button/_button.scss
Filesystem Path: sass/directives/02_base_components/button/_button.scss
Size: 7 KB

Content:


                                // Fancy Play Button
// Initial state
$_ripple-diameter: 24em;
$_play-button-size: 4em;
$_ripple-color: white;
$_ripple-hover-color: $sky-blue;

@function ripple-animation-delay($duration, $count, $index) {
  $increment: $duration/$count;
  @return $index * $increment;
}

@mixin play-rippling-button {
  @keyframes ripple {
    0% {
      transform: scale(0.2);
      opacity: 0;
    }
    50% {
      opacity: 0.9;
    }
    100% {
      transform: scale($_ripple-diameter);
      opacity: 0;
    }
  }

  .ripple-block {
    position: relative;
    width: $_ripple-diameter;
    height: $_ripple-diameter;
    display: block;

    &:hover,
    &:active,
    &:focus {
      .fa-play-circle {
        color: $_ripple-hover-color;
      }
    }

    .fa-play-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: $_play-button-size;
      color: $_ripple-color;
      transition: color $video-play-button-ripple--transition;
    }

    .ripple {
      position: absolute;
      width: $_ripple-diameter;
      height: $_ripple-diameter;
      background: rgba($_ripple-color, $video-play-button-ripple--opacity);
      border-radius: 50%;
      animation: ripple $video-play-button-ripple--duration ease-in-out infinite;
      transition: background $video-play-button-ripple--transition;

      .ripple-block:hover &,
      .ripple-block:active &,
      .ripple-block:focus & {
        background: rgba($_ripple-hover-color, $video-play-button-ripple--opacity);
      }
    }

    @media (prefers-reduced-motion) {
      .fa-play-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: $_play-button-size * 2;
        color: $_ripple-color;
      }
      .ripple-block .ripple {
        animation: none;
        display: none;
      }
    }
  }

  @for $index from 0 through ($video-play-button-ripple--count - 1) {
    $order: $index + 1;
    .ripple-block .ripple-#{$order} {
      animation-delay: ripple-animation-delay($video-play-button-ripple--duration, $video-play-button-ripple--count, $index);
    }
  }
}

URL: /components/raw/button/_video_controls.scss
Filesystem Path: sass/directives/02_base_components/button/_video_controls.scss
Size: 2.2 KB

Handle: @button
Variants (12): Base , Primary Button , Secondary Button , Tertiary Button , Quarternary Button , Quinary Button , Small Button , Medium Button , Large Button , Massive Button , Negative Button , Disabled Button
Preview:
- With layout
- Component only
Filesystem Path: sass/directives/02_base_components/button/button.hbs

Primary Button usage:

Secondary Button usage:

Tertiary Button usage:

Quarternary Button usage:

Quinary Button usage: on blue or dark backgrounds

Small Button usage:

Medium Button usage:

Large Button usage: On Buy Boxes http://dev.hiring.careerbuilder.com/recruiting-solutions/post-jobs

Massive Button usage:

Negative Button usage:

Disabled Button usage:

Button

00 Variables

Animations

01 Tools

02 Base Components

03 Components