Button

Ready

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Default -->
<button class=" btn "> Mehr
</button>


        
            <!-- Input -->
<input class=" btn " type="submit" value="Mehr" />


        
            <!-- Link -->
<button class=" btn -chevron-up" href="#"> Mehr
</button>


        
            <!-- Full -->
<button class=" btn -w-full"> Mehr
</button>


        
            <!-- Cta -->
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button>


        
            <!-- Cta Full -->
<button class=" btn -cta -w-full -chevron-right" href="#"> Mehr
</button>


        
            <!-- Secondary -->
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button>


        
            <!-- Secondary Full -->
<button class=" btn -secondary -w-full -chevron-right" href="#"> Mehr
</button>


        
            <!-- Disabled -->
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>


        
            <!-- Icon -->
<button class=" btn -icon-only -chevron-right" href="#">
</button>


        
            <!-- Filled Icon -->
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button>


        
            <!-- Tag Selector -->
<button class=" btn -tag-selector" href="#"> Innovation
</button>


        
            <!-- Tag Selector Active -->
<button class=" btn -tag-selector -active" href="#"> Innovation
</button>


        
            <!-- Arrow Button Top -->
<div class="grid-x grid-margin-x grid-margin-y -bg-secondary">
      <div class="cell">
          <button class=" btn -arrow -arrow-top" href="#"> Innovation
          </button> </div>
  </div>


        
            <!-- Arrow Button Top Full Width -->
<div class="grid-x grid-margin-x grid-margin-y -bg-secondary">
      <div class="cell">
          <button class=" btn -arrow -arrow-top -w-full" href="#"> Innovation
          </button> </div>
  </div>


        
            <!-- Arrow Button Top No Background -->
<button class=" btn -arrow -arrow-top" href="#"> Innovation
</button>


        
            <!-- Arrow Button Middle -->
<div class="grid-x grid-margin-x grid-margin-y -bg-primary">
      <div class="cell">
          <button class=" btn -arrow -arrow-middle" href="#"> Innovation
          </button> </div>
  </div>


        
            <!-- Arrow Button Middle No Background -->
<button class=" btn -arrow -arrow-middle" href="#"> Innovation
</button>


        
            <!-- Arrow Button Bottom -->
<div class="grid-x grid-margin-x grid-margin-y -bg-gray-light">
      <div class="cell">
          <button class=" btn -arrow -arrow-bottom" href="#"> Innovation
          </button> </div>
  </div>


        
            <!-- Arrow Button Bottom No Background -->
<button class=" btn -arrow -arrow-bottom" href="#"> Innovation
</button>


        {{#if bg}}
  <div class="grid-x grid-margin-x grid-margin-y {{bg}}">
    <div class="cell">
{{/if}}
{{#if input}}
  <input class="{{mixes}} btn {{modifiers}}" type="{{type}}" value="{{title}}" />
{{else}}
  {{#tag tag href=href class=(concat mixes " btn " modifiers) type=type}}
    {{{title}}}
  {{/tag}}
{{/if}}
{{#if bg}}
    </div>
  </div>
{{/if}}


        
        
            /* Default */
{
  "tag": "button",
  "title": "Mehr"
}


        
            /* Input */
{
  "tag": "button",
  "input": true,
  "title": "Mehr",
  "type": "submit"
}


        
            /* Link */
{
  "tag": "button",
  "href": "#",
  "title": "Mehr",
  "modifiers": "-chevron-up"
}


        
            /* Full */
{
  "tag": "button",
  "title": "Mehr",
  "modifiers": "-w-full"
}


        
            /* Cta */
{
  "tag": "button",
  "href": "#",
  "title": "Mehr",
  "modifiers": "-cta -chevron-right"
}


        
            /* Cta Full */
{
  "tag": "button",
  "href": "#",
  "title": "Mehr",
  "modifiers": "-cta -w-full -chevron-right"
}


        
            /* Secondary */
{
  "tag": "button",
  "href": "#",
  "title": "Mehr",
  "modifiers": "-secondary -chevron-right"
}


        
            /* Secondary Full */
{
  "tag": "button",
  "href": "#",
  "title": "Mehr",
  "modifiers": "-secondary -w-full -chevron-right"
}


        
            /* Disabled */
{
  "tag": "button",
  "href": "#",
  "title": "Mehr",
  "modifiers": "-disabled -chevron-right"
}


        
            /* Icon */
{
  "tag": "button",
  "href": "#",
  "modifiers": "-icon-only -chevron-right"
}


        
            /* Filled Icon */
{
  "tag": "button",
  "href": "#",
  "modifiers": "-icon-only -fill -chevron-right"
}


        
            /* Tag Selector */
{
  "tag": "button",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-tag-selector"
}


        
            /* Tag Selector Active */
{
  "tag": "button",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-tag-selector -active"
}


        
            /* Arrow Button Top */
{
  "tag": "button",
  "bg": "-bg-secondary",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-top"
}


        
            /* Arrow Button Top Full Width */
{
  "tag": "button",
  "bg": "-bg-secondary",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-top -w-full"
}


        
            /* Arrow Button Top No Background */
{
  "tag": "button",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-top"
}


        
            /* Arrow Button Middle */
{
  "tag": "button",
  "bg": "-bg-primary",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-middle"
}


        
            /* Arrow Button Middle No Background */
{
  "tag": "button",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-middle"
}


        
            /* Arrow Button Bottom */
{
  "tag": "button",
  "bg": "-bg-gray-light",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-bottom"
}


        
            /* Arrow Button Bottom No Background */
{
  "tag": "button",
  "href": "#",
  "title": "Innovation",
  "modifiers": "-arrow -arrow-bottom"
}

File:

Content:


                                .btn {
  $symbol: map-get($icons, 'chevron-right');

  @include typography-level('button');

  position: relative;
  display: inline-block;
  max-width: 100%;
  height: 4.4rem;
  margin: 0;
  padding: 0 5rem 0 0;
  overflow: hidden;
  outline: 0 none;
  border: 0 none;
  background-color: $transparent;
  background-position-x: 100%;
  background-size: 220% 100%;
  vertical-align: middle;
  line-height: 4.4rem;
  color: var(--btn-color, #{$primary});
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;

  &,
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }

  &,
  &::after,
  &::before {
    background-repeat: no-repeat;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(100% - 4.4rem);
    width: 0;
    height: 4.4rem;
    border: 0 var(--btn-color, #{$primary}) solid;
    line-height: inherit;
  }

  &::after {
    @include icon-content-extended($symbol, inline-block);

    position: absolute;
    top: 0;
    right: 0;
    width: 4.4rem;
    height: 4.4rem;
    background-image: linear-gradient(
      to right,
      var(
        --btn-foreground,
        unquote(
          '#{$black percentage(1/3)},
      #{$transparent percentage(1/3)},
      #{$transparent percentage(2/3)},
      #{$transparent percentage(2/3)}'
        )
      )
    );
    background-position-x: 98%;
    background-size: 330% 100%;
    line-height: inherit;
    color: var(--btn-color, #{$primary});
    text-align: center;
  }

  &:hover,
  &:focus {
    background-position-x: 0;
    color: var(--btn-hover-color, #{$primary});
    transition: background-position 0.2s linear;

    &::before {
      width: 4.4rem;
      border-width: 0.2rem;
      border-color: var(--btn-hover-border);
      transition: width 0.2s linear, border-right-width 0s linear 0.2s;
    }

    &::after {
      background-position-x: 50%;
      color: var(--btn-hover-icon, #{$primary});
      transition: background-position 0.2s linear;
    }
  }

  &:active {
    color: var(--btn-active-color, #{$black});

    &::before {
      border-color: var(--btn-active-border);
    }

    &::after {
      background-position-x: 0;
      color: var(--btn-active-icon, #{$white});
    }
  }

  &.-cta,
  &.-secondary {
    padding-left: 1.2rem;

    &::before {
      border: 0 none;
    }
  }

  &.-cta {
    background-image: linear-gradient(to right, var(--btn-cta-background, unquote('#{$black} 50%, #{$secondary} 50%')));
    color: var(--btn-cta-color, #{$white});

    &::after {
      background-image: linear-gradient(
        to right,
        var(--btn-cta-foreground, unquote('#{$transparent} 50%, #{$secondary} 50%'))
      );
      background-position-x: 96%;
      background-size: 220% 100%;
      color: var(--btn-cta-color, #{$white});
    }

    &:hover,
    &:focus {
      color: var(--btn-cta-hover-color, #{$white});

      &::after {
        color: var(--btn-cta-hover-icon, #{$white});
      }
    }

    &:active {
      color: var(--btn-cta-active-color, #{$white});

      &::after {
        background-position-x: 0;
        color: var(--btn-cta-active-icon, #{$white});
      }
    }
  }

  &.-secondary {
    background-image: linear-gradient(
      to right,
      var(--btn-secondary-background, unquote('#{$black} 50%, #{$gray-darker} 50%'))
    );
    color: var(--btn-secondary-color, #{$white});

    &::after {
      background-image: linear-gradient(
        to right,
        var(--btn-secondary-foreground, unquote('#{$transparent} 50%, #{$gray-darker} 50%'))
      );
      background-position-x: 96%;
      background-size: 220% 100%;
      color: var(--btn-secondary-icon, #{$white});
    }

    &:hover,
    &:focus {
      color: var(--btn-secondary-hover-color, #{$white});

      &::after {
        color: var(--btn-secondary-hover-icon, #{$white});
      }
    }

    &:active {
      background-color: $black;
      color: var(--btn-secondary-active-color, #{$white});

      &::after {
        background-position-x: 0;
        color: var(--btn-secondary-active-icon, #{$white});
      }
    }
  }

  &.-icon-only {
    padding-right: 4.4rem;
    background: $transparent;

    &::before {
      border: 0 none;
    }

    &::after {
      top: 0;
      color: var(--btn-icon-only-icon, #{$primary});
    }

    &:hover {
      background: $transparent;
      color: var(--btn-icon-only-hover-icon, #{$primary});

      &::after {
        background: $transparent;
        background-position-x: 96%;
        color: var(--btn-icon-only-hover-icon, #{$black});
      }
    }

    &:active::after {
      background-color: $transparent;
      background-position-x: 96%;
      color: var(--btn-icon-only-active-icon, #{$black});
    }

    &.-fill {
      &::after {
        background-image: linear-gradient(
          to right,
          var(--btn-icon-only-fill-foreground, unquote('#{$black} 50%, #{$secondary} 50%'))
        );
        background-position-x: 96%;
        background-size: 220% 100%;
        color: var(--btn-icon-only-fill-icon, #{$white});
      }

      &:hover::after {
        background-position-x: 0;
        color: var(--btn-icon-only-fill-hover-icon, #{$white});
      }

      &:active::after {
        color: var(--btn-icon-only-fill-active-icon, #{$white});
      }
    }
  }

  &.-tag-selector {
    @include typography-level('heading-3');

    margin: 0.6rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid $black;
    color: $black;

    &:not(.-active):hover {
      border-color: $primary;
      background-color: $primary;
      color: $white;
    }

    &.-active {
      border-color: $secondary;
      background-color: $secondary;
      color: $white;
    }

    &::before,
    &::after {
      content: none;
    }
  }

  &:disabled,
  &.-disabled {
    &,
    &:hover,
    &:active {
      /* stylelint-disable declaration-no-important */
      background: $gray-light !important;
      color: $white !important;

      &::after {
        background: $gray-light !important;
        color: $white !important;
      }
      /* stylelint-enable */
    }
  }

  &.-w-full {
    width: 100%;
    max-width: 100%;
  }

  @each $name, $icon in $icons {
    &.-#{$name} {
      @include icon-content($icon, false);
    }
  }

  &.-arrow {
    padding: 0 1rem 0 5rem;
    background-color: var(--btn-background-arrow, $white);
    background-image: linear-gradient(to right, $black 33.33333%, transparent 33.33333%, transparent 66.66667%, transparent 66.66667%);
    background-position-x: -90%;
    background-size: 330% 100%;
    color: var(--btn-arrow-text-color, $black);

    &:hover {
      background-position-x: 2.5rem;
      color: $white;
      transition: background-position 0.2s linear, color 0.2s linear;
    }

    &::after {
      $symbol: map-get($icons, 'arrow-right-top');
      @include icon-content-extended($symbol, inline-block);

      left: 0;
      width: 4.4rem;
      background-color: var(--btn-background-arrow, $white);
      background-image: none;
      font-size: 2rem;
      line-height: 4.4rem;
      color: var(--btn-arrow-color, $secondary);
    }

    &:hover::before,
    &:focus::before,
    &:active::before {
      display: none;
    }

    &:hover::before,
    &:focus::before,
    &:active::before,
    &:hover::after,
    &:focus::after,
    &:active::after {
      border: 0;
    }

    &.-arrow-middle {
      &::after {
        $symbol: map-get($icons, 'arrow-right-middle');
        content: unquote("'#{$symbol}'");
      }
    }

    &.-arrow-bottom {
      &::after {
        $symbol: map-get($icons, 'arrow-right-bottom');
        content: unquote("'#{$symbol}'");
      }
    }
  }
}

// stylelint-disable selector-no-qualifying-type
input {
  &.btn {
    &[type='button'],
    &[type='reset'],
    &[type='submit'] {
      padding-right: 0;
    }
  }

  &.-cta,
  &.-secondary {
    &[type='button'],
    &[type='reset'],
    &[type='submit'] {
      padding-right: 1.2rem;
    }
  }
}
// stylelint-enable

URL: /components/raw/atoms-button/_button.scss
Filesystem Path: src/components/02-ui-components/01-atoms/07-button/_button.scss
Size: 8 KB

Handle: @atoms-button
Variants (20): Default , Input , Link , Full , Cta , Cta Full , Secondary , Secondary Full , Disabled , Icon , Filled Icon , Tag Selector , Tag Selector Active , Arrow Button Top , Arrow Button Top Full Width , Arrow Button Top No Background , Arrow Button Middle , Arrow Button Middle No Background , Arrow Button Bottom , Arrow Button Bottom No Background
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-ui-components/01-atoms/07-button/button.hbs
Referenced by (27): @molecules-teaser, @molecules-teaser--simple, @molecules-teaser--horizontal, @molecules-teaser--horizontal-with-signet, @molecules-teaser--dark-highlight, @molecules-teaser--light-highlight, @molecules-teaser--dark-overlay, @molecules-teaser--light-overlay, @molecules-teaser--tile-primary, @molecules-teaser--tile-secondary, @molecules-teaser--tile-white, @molecules-teaser--tile-gray, @molecules-teaser--tile-gray-darker, @molecules-teaser--tile-gray-dark, @molecules-teaser--tile-gray-light, @molecules-teaser--tile-gray-lighter, @molecules-teaser--tile-black, @molecules-cookie-privacy, @templates-backgrounds-page, @color-scheme, @molecules-slider, @templates-formular-page, @templates-formular-page--black, @templates-formular-page--darker, @templates-formular-page--gray, @templates-formular-page--secondary, @molecules-dealer

There are no notes for this item.

Button

Atoms

Logo

Media

Form

Molecules

Flyout

Teaser

Download

Accordion

Organisms

Header

Templates

Formular Page

Layouting

Helpers