Button: Button secondary

Design

HTML
View
Context
Assets
Info
Notes


        
        <a class="button button--secondary" href="#"><span class="button__inner"><span class="button__text">Button-Text</span></span></a>


        #{link && 'a' || tag || 'button'}.button(
  class=classList(
    `button--${style || 'primary'}`
  ),
  type=type || (!link && !tag) && 'button',
  target=(external || download) && '_blank',
  href=link,
  download=download,
  disabled=disabled
)&attributes(attr)
  span.button__inner
    //- Icon
    if icon
      +include('@icon', { icon: icon, title: iconTitle })

    //- Text
    if text
      span.button__text #{text}

    //- Icon
    if iconAfter
      +include('@icon', { icon: iconAfter, title: iconTitle })


        
            
            {
  "text": "Button-Text",
  "link": "#",
  "style": "secondary"
}

File:

Content:


                                .button {
  appearance: none;
  color: #fff;
  display: inline-flex;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  line-height: 1;
  overflow: hidden;
  padding: 0 2.2rem;
  position: relative;
  text-align: center;

  &::before,
  &::after {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    width: 2.4rem;
  }

  &::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-green + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
    left: 0;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-green + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
    right: 0;
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover::before {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-green-hover + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
    }
  }

  &:not([disabled]):focus::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-green-hover + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover::after {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-green-hover + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
    }
  }

  &:not([disabled]):focus::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-green-hover + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
  }

  @include mq($until: m) {
    width: 100%;
  }
}

.button__inner {
  align-items: center;
  background: $color-green;
  display: inline-flex;
  flex-grow: 1;
  height: 5.2rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.button:not([disabled]):hover,
.button:not([disabled]):focus {
  .button__inner {
    background: $color-green-hover;
  }
}

.button--secondary {
  .button__inner {
    background: $color-blue;
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover {
      .button__inner { /* stylelint-disable-line */
        background: $color-blue-hover;
      }
    }
  }

  &:not([disabled]):focus {
    .button__inner { /* stylelint-disable-line */
      background: $color-blue-hover;
    }
  }

  &::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover::before {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue-hover + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
    }
  }

  &:not([disabled]):focus::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue-hover + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover::after {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue-hover + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
    }
  }

  &:not([disabled]):focus::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue-hover + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
  }
}

.button--tertiary {
  .button__inner {
    background: $color-blue-light;
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover {
      .button__inner { /* stylelint-disable-line */
        background: $color-dark;
      }
    }
  }

  &:not([disabled]):focus {
    .button__inner { /* stylelint-disable-line */
      background: $color-dark;
    }
  }

  &::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue-light + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-blue-light + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover::before {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-dark + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
    }
  }

  &:not([disabled]):focus::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-dark + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:not([disabled]):hover::after {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-dark + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
    }
  }

  &:not([disabled]):focus::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-dark + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
  }
}

.button .icon {
  height: 1.6rem;
  width: 1.6rem;

  &:first-child {
    margin: 0 1rem 0 -0.1rem;
  }

  &:last-child {
    margin: 0 -0.1rem 0 1rem;
  }
}

.button[disabled] {
  cursor: not-allowed;

  @media(hover: hover) and (pointer: fine) {
    &:hover::before {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-gray + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
    }
  }

  &::before,
  &:focus::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-gray + '" d="M24 0h-9.86a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover::after {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-gray + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
    }
  }

  &::after,
  &:focus::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 52"><defs/><path fill="' + $color-gray + '" d="M0 52h9.86a10 10 0 0 0 7.07-2.93l4.14-4.14A10 10 0 0 0 24 37.86V14.14a10 10 0 0 0-2.93-7.07l-4.14-4.14A10 10 0 0 0 9.86 0H0v52z"/></svg>');
  }

  .button__inner {
    background: $color-gray;
  }
}

URL: /components/raw/button/button.scss
Filesystem Path: src/components/atoms/button/button.scss
Size: 9.1 KB

Handle: @button--secondary
Variants (10): Button primary , Button primary with icon , Button primary with icon , Button primary disabled , Button secondary , Button secondary with icon , Button secondary disabled , Button tertiary , Button tertiary with icon , Button tertiary disabled
Preview:
- With layout
- Component only
Filesystem Path: src/components/atoms/button/button.pug
References (1): @icon
Referenced by (8): @filter, @filter--single, @tabs-slider, @tabs-slider--events, @three-teaser, @three-teaser--blue-light, @three-teaser--bg-image, @three-teaser--blue-gray

There are no notes for this item.