Button

<div class="demo">
    <button class="btn btn--small">Small Button (TBD)</button><button class="btn btn--medium">Medium Button</button><button class="btn btn--large">Large Button (TBD)</button><button class="btn btn--light">Light Button</button><button class="btn btn--cta" data-label="Call To Action Button">
        Call To Action Button
    </button>
</div>
<div class="demo demo--inverted">
    <button class="btn btn--small btn--inverted">Small Button (TBD)</button><button class="btn btn--medium btn--inverted">Medium Button</button><button class="btn btn--large btn--inverted">Large Button (TBD)</button><button class="btn btn--light btn--inverted">Light Button</button><button class="btn btn--cta btn--cta--inverted" data-label="Call To Action Button">
        Call To Action Button
    </button>
</div>
<div class="demo">
    <button class="btn btn--small">Small Button (TBD)</button>
    <button class="btn btn--medium">Medium Button</button>
    <button class="btn btn--large">Large Button (TBD)</button>
    <button class="btn btn--light">Light Button</button>
    <button class="btn btn--cta" data-label="Call To Action Button" >Call To Action Button</button>
</div>
<div class="demo demo--inverted">
    <button class="btn btn--small btn--inverted">Small Button (TBD)</button>
    <button class="btn btn--medium btn--inverted">Medium Button</button>
    <button class="btn btn--large btn--inverted">Large Button (TBD)</button>
    <button class="btn btn--light btn--inverted">Light Button</button>
    <button class="btn btn--cta btn--cta--inverted" data-label="Call To Action Button">Call To Action Button</button>
</div>
/* No context defined. */
  • Content:
    //
    // Button
    //
    
    $default-btn-margin: $spacer-sm;
    
    .btn {
      @extend %base-button;
      @extend %heading-font-bold;
      @include hover-fill($brand-interaction, $button-color, $button-color);
    
      padding: $spacer-md $spacer-base;
      border: 3px solid $button-border-color;
      margin-bottom: $default-btn-margin;
      background-color: $button-background;
      border-radius: 0;
      font-size: $font-size-sm;
    
      &--cta {
        border-color: $button-cta-border-color;
        background-color: $button-cta-background;
        color: $button-cta-color;
    
        &::before {
          position: absolute;
          z-index: 1;
          content: attr(data-label);
        }
    
        &::after {
          z-index: 0;
          background-color: $button-cta-hover-background;
        }
    
        &:hover,
        &:focus {
          border-color: $button-cta-hover-border-color;
          color: $button-cta-hover-color;
    
          &::after {
            width: 100%;
          }
        }
    
        &--inverted {
          &:hover,
          &:focus {
            border-color: $button-inverted-border-color;
            color: $button-cta-hover-color;
          }
        }
      }
    
      &--light {
        padding: $spacer-xs 0;
        border-width: 0 0 3px;
        background-color: transparent;
      }
    
      &--small {
        padding: $spacer-sm $spacer-md;
        font-size: $font-size-base;
      }
    
      &--condensed {
        padding: $spacer-xs $spacer-sm;
        font-size: $font-size-base;
      }
    
      &--large {
        padding: $spacer-md $spacer-lg;
        font-size: $font-size-md;
      }
    
      &--inverted {
        @include hover-fill($brand-interaction, $button-inverted-hover-color, $button-inverted-hover-color);
    
        border-color: $button-inverted-border-color;
        color: $button-inverted-color;
      }
    
      &--icon {
        padding: $spacer-xxs;
        border: 0;
        background-color: transparent;
      }
    
      + .btn {
        margin-left: $default-btn-margin;
      }
    }
    
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/05-atoms/form-elements/button/_button.scss
  • Size: 1.8 KB

Idee für Button Transitions hier: Tympanus