# Button

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="demo">
        <button class="btn btn--xsmall">Small Button</button>
        <button class="btn btn--small">Small Button</button>
        <button class="btn btn--medium">Medium Button</button>
        <button class="btn btn--large">Large Button</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--xsmall">Small Button</button>
        <button class="btn btn--small">Small Button</button>
        <button class="btn btn--medium">Medium Button</button>
        <button class="btn btn--large">Large Button</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. */

`
File:

- Content:
  `

      //
      // Button
      //
      .btn {
        @extend %base-button;
        @extend %heading-font-bold;

        @include hover-fill($brand-interaction, $button-color, $button-color);

        padding: $spacer-md $spacer-base;

        font-size: $font-size-sm;

        background-color: $button-background;
        border: 3px solid $button-border-color;
        border-radius: 0;

        &--cta {
          color: $button-cta-color;
          background-color: $button-cta-background;
          border-color: $button-cta-border-color;

          &::before {
            content: attr(data-label);
            position: absolute;
            z-index: 1;
          }

          &::after {
            z-index: 0;
            background-color: $button-cta-hover-background;
          }

          &:hover,
          &:focus {
            color: $button-cta-hover-color;
            border-color: $button-cta-hover-border-color;

            &::after {
              width: 100%;
            }
          }

          &--inverted {
            &:hover,
            &:focus {
              color: $button-cta-hover-color;
              border-color: $button-inverted-border-color;
            }
          }
        }

        &--light {
          padding: $spacer-xs 0;
          background-color: transparent;
          border-width: 0 0 3px;
        }

        &--small {
          padding: $spacer-sm $spacer-md;
          font-size: $font-size-base;
        }

        &--xsmall {
          padding: $spacer-xs $spacer-sm;
          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);

          color: $button-inverted-color;
          border-color: $button-inverted-border-color;
        }

        + .btn {
          margin-left: $spacer-sm;
        }
      }

  `
- URL: /components/raw/button/_button.scss
- Filesystem Path: components/05-atoms/form-elements/button/_button.scss
- Size: 1.7 KB

- Handle: @button
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/form-elements/button/button.html

Idee für Button Transitions hier: Tympanus