Gut zu wissen
Grundlagen
Komponenten
Templates
Buttons
Verwenden Sie Buttons um Interaktionen zu highlighten.

Basic Buttons

A button can contain text. Although any tag can be used for a button, it will only be keyboard focusable if you use a button tag or you add the property tabindex="0".

Primary Button
ready
      
<a href="javascript:void(0)" class="btn btn--primary">Primary Button</a>
<a href="javascript:void(0)" class="btn btn--outline-primary">Primary Outline Button</a>

{{ page.inlinestyles }}
      
      .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  margin-top: $grid-gutter-width/2;
  padding: $input-btn-padding-y $input-btn-padding-x;
  outline: none;
  transition: 0.3s;

  font-size: $font-size-sm;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.63px;

  border-width: $border-width;
  border-style: solid;
  border-color: $primary;
  border-radius: $border-radius-sm;

  box-shadow: none !important;

  img{
    margin-left: 10px;
  }

  &:before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    border-radius: $border-radius-lg;
    display: none;
    left: $grid-gutter-width/-4;
    top: $grid-gutter-width/-4;
    border: 2px solid rgba($primary, 0.3);
  }

  &:active,
  &:focus {
    &:before {
      display: block;
    }
  }

  &--primary {
    background-color: $primary;
    color: $secondary !important;
    border-color: transparent;

    &:hover {
      color: $secondary;
    }

    &:hover:not(:focus),
    &:active {
      background-color: rgba($primary, 0.9);
    }
  }

  @each $key,$color in $colors{
    &--#{$key}{
      background-color: $color;
      color: #{color-contrast($color)};
      border-color: transparent;
    }
  }

  &--secondary {
    background-color: $secondary;
    color: $primary;
    border-color: transparent;

    &:hover {
      color: $primary;
    }

    &:hover:not(:focus),
    &:active {
      background-color: rgba($secondary, 0.8);
    }

    &:before {
      border-color: rgba($secondary, 0.3);
    }
  }

  &--disabled {
    background-color: $gray;
    color: $white;
    border-color: transparent;
    pointer-events: none;
    opacity: 1 !important;
  }

  &--outline {
    border-color: $body-color;

    &:hover:not(:focus),
    &:active {
      background-color: rgba($primary, 0.1);
      color: $primary;
    }

    &-primary {
      border-color: $primary;
      color: $primary;

      &:hover {
        color: $primary;
      }

      &:focus:not(:active),
      &:focus:not(:active):hover {
        background-color: transparent;
      }

      &:hover:not(:focus),
      &:active {
        background-color: rgba($primary, 0.1);
        color: $primary;
      }
    }

    &-secondary {
      border-color: $secondary;
      color: $secondary;

      &:hover {
        color: $secondary;
      }

      &:hover:not(:focus),
      &:active {
        background-color: rgba($secondary, 0.1);
      }

      &:before {
        border-color: rgba($secondary, 0.3);
      }
    }

    &-disabled {
      color: $gray;
      border-color: $gray;
      pointer-events: none;
      opacity: 1 !important;
    }
  }

  &__icon {
    height: #{$line-height-base}em;
    display: flex;
    align-items: center;

    &--before {
      margin-right: $grid-gutter-width;
    }
  }
}
Secondary Button
ready
      
<a href="javascript:void(0)" class="btn btn--secondary">Secondary Button</a>
<a href="javascript:void(0)" class="btn btn--outline-secondary">Secondary Outline Button</a>

{{ page.inlinestyles }}
      
      .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  margin-top: $grid-gutter-width/2;
  padding: $input-btn-padding-y $input-btn-padding-x;
  outline: none;
  transition: 0.3s;

  font-size: $font-size-sm;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.63px;

  border-width: $border-width;
  border-style: solid;
  border-color: $primary;
  border-radius: $border-radius-sm;

  box-shadow: none !important;

  img{
    margin-left: 10px;
  }

  &:before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    border-radius: $border-radius-lg;
    display: none;
    left: $grid-gutter-width/-4;
    top: $grid-gutter-width/-4;
    border: 2px solid rgba($primary, 0.3);
  }

  &:active,
  &:focus {
    &:before {
      display: block;
    }
  }

  &--primary {
    background-color: $primary;
    color: $secondary !important;
    border-color: transparent;

    &:hover {
      color: $secondary;
    }

    &:hover:not(:focus),
    &:active {
      background-color: rgba($primary, 0.9);
    }
  }

  @each $key,$color in $colors{
    &--#{$key}{
      background-color: $color;
      color: #{color-contrast($color)};
      border-color: transparent;
    }
  }

  &--secondary {
    background-color: $secondary;
    color: $primary;
    border-color: transparent;

    &:hover {
      color: $primary;
    }

    &:hover:not(:focus),
    &:active {
      background-color: rgba($secondary, 0.8);
    }

    &:before {
      border-color: rgba($secondary, 0.3);
    }
  }

  &--disabled {
    background-color: $gray;
    color: $white;
    border-color: transparent;
    pointer-events: none;
    opacity: 1 !important;
  }

  &--outline {
    border-color: $body-color;

    &:hover:not(:focus),
    &:active {
      background-color: rgba($primary, 0.1);
      color: $primary;
    }

    &-primary {
      border-color: $primary;
      color: $primary;

      &:hover {
        color: $primary;
      }

      &:focus:not(:active),
      &:focus:not(:active):hover {
        background-color: transparent;
      }

      &:hover:not(:focus),
      &:active {
        background-color: rgba($primary, 0.1);
        color: $primary;
      }
    }

    &-secondary {
      border-color: $secondary;
      color: $secondary;

      &:hover {
        color: $secondary;
      }

      &:hover:not(:focus),
      &:active {
        background-color: rgba($secondary, 0.1);
      }

      &:before {
        border-color: rgba($secondary, 0.3);
      }
    }

    &-disabled {
      color: $gray;
      border-color: $gray;
      pointer-events: none;
      opacity: 1 !important;
    }
  }

  &__icon {
    height: #{$line-height-base}em;
    display: flex;
    align-items: center;

    &--before {
      margin-right: $grid-gutter-width;
    }
  }
}
Deaktivierter Button
ready
      
<a href="javascript:void(0)" class="btn btn--disabled">Button Disabled</a>
<a href="javascript:void(0)" class="btn btn--outline-disabled">Outline Button Disabled</a>


{{ page.inlinestyles }}
      
      .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  margin-top: $grid-gutter-width/2;
  padding: $input-btn-padding-y $input-btn-padding-x;
  outline: none;
  transition: 0.3s;

  font-size: $font-size-sm;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.63px;

  border-width: $border-width;
  border-style: solid;
  border-color: $primary;
  border-radius: $border-radius-sm;

  box-shadow: none !important;

  img{
    margin-left: 10px;
  }

  &:before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    border-radius: $border-radius-lg;
    display: none;
    left: $grid-gutter-width/-4;
    top: $grid-gutter-width/-4;
    border: 2px solid rgba($primary, 0.3);
  }

  &:active,
  &:focus {
    &:before {
      display: block;
    }
  }

  &--primary {
    background-color: $primary;
    color: $secondary !important;
    border-color: transparent;

    &:hover {
      color: $secondary;
    }

    &:hover:not(:focus),
    &:active {
      background-color: rgba($primary, 0.9);
    }
  }

  @each $key,$color in $colors{
    &--#{$key}{
      background-color: $color;
      color: #{color-contrast($color)};
      border-color: transparent;
    }
  }

  &--secondary {
    background-color: $secondary;
    color: $primary;
    border-color: transparent;

    &:hover {
      color: $primary;
    }

    &:hover:not(:focus),
    &:active {
      background-color: rgba($secondary, 0.8);
    }

    &:before {
      border-color: rgba($secondary, 0.3);
    }
  }

  &--disabled {
    background-color: $gray;
    color: $white;
    border-color: transparent;
    pointer-events: none;
    opacity: 1 !important;
  }

  &--outline {
    border-color: $body-color;

    &:hover:not(:focus),
    &:active {
      background-color: rgba($primary, 0.1);
      color: $primary;
    }

    &-primary {
      border-color: $primary;
      color: $primary;

      &:hover {
        color: $primary;
      }

      &:focus:not(:active),
      &:focus:not(:active):hover {
        background-color: transparent;
      }

      &:hover:not(:focus),
      &:active {
        background-color: rgba($primary, 0.1);
        color: $primary;
      }
    }

    &-secondary {
      border-color: $secondary;
      color: $secondary;

      &:hover {
        color: $secondary;
      }

      &:hover:not(:focus),
      &:active {
        background-color: rgba($secondary, 0.1);
      }

      &:before {
        border-color: rgba($secondary, 0.3);
      }
    }

    &-disabled {
      color: $gray;
      border-color: $gray;
      pointer-events: none;
      opacity: 1 !important;
    }
  }

  &__icon {
    height: #{$line-height-base}em;
    display: flex;
    align-items: center;

    &--before {
      margin-right: $grid-gutter-width;
    }
  }
}

A button can be disabled, pointer events will not occur.