Button

<div class="demo">
    <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--undefined btn--light">Large Button</button>
    <button class="btn btn--undefined 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 inverted</button>
    <button class="btn btn--medium btn--inverted">Medium Button inverted</button>
    <button class="btn btn--large btn--inverted">Large Button inverted</button>
    <button class="btn btn--undefined btn--light btn--inverted">Large Button inverted</button>
</div>
import Button from "./components/01-atoms/input-elements/button/index.jsx";

<div class="demo">
    <Button size="small">Small Button</Button>
    <Button size="medium">Medium Button</Button>
    <Button size="large">Large Button</Button>
    <Button light>Large Button</Button>
    <Button cta>Call To Action Button</Button>
</div>
<div class="demo demo--inverted">
    <Button size="small" inverted>Small Button inverted</Button>
    <Button size="medium" inverted>Medium Button inverted</Button>
    <Button size="large" inverted>Large Button inverted</Button>
    <Button light inverted>Large Button inverted</Button>
</div>
/* No context defined for this component. */
  • Content:
    //
    // Button
    //
    
    $default-btn-margin: $spacer-sm;
    
    .btn {
      @extend %base-button;
      @extend %heading-font-bold;
      @include hover-fill($brand-interaction, $button-color, $button-color);
    
      margin-bottom: $default-btn-margin;
      border: 3px solid $button-border-color;
      border-radius: 0;
      background-color: $button-background;
      padding: $spacer-md $spacer-base;
      line-height: $button-medium-line-height;
      font-size: $button-medium-font-size;
    
      &--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-color;
    
          &::after {
            width: 100%;
          }
        }
      }
    
      &--light {
        border-width: 0 0 3px;
        background-color: transparent;
        padding: $spacer-xs 0;
      }
    
      &--small {
        padding: $spacer-sm $spacer-md;
        line-height: $button-small-line-height;
        font-size: $button-small-font-size;
      }
    
      &--condensed {
        padding: $spacer-xs $spacer-sm;
        line-height: $button-small-line-height;
        font-size: $button-small-font-size;
      }
    
      &--large {
        padding: $spacer-md $spacer-lg;
        line-height: $button-large-line-height;
        font-size: $button-large-font-size;
      }
    
      &--inverted {
        @include hover-fill($brand-interaction, $button-inverted-color, $button-inverted-color);
        border-color: $button-inverted-border-color;
        color: $button-inverted-color;
      }
    
      &--icon {
        border: 0;
        background-color: transparent;
        padding: $spacer-xxs;
      }
    
      & + .btn {
        margin-left: $default-btn-margin;
      }
    }
    
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/01-atoms/input-elements/button/_button.scss
  • Size: 1.8 KB
  • Content:
    import { createElement } from 'complate-stream'
    import classNames from 'classnames'
    
    export default function Button ({ size, inverted, cta, light, href }, ...children) {
      let buttonClass = classNames(`btn btn--${size}`, { 'btn--light': light }, { 'btn--inverted': inverted }, { 'btn--cta': cta })
      let label
      if (cta) {
        label = children.join('')
      }
      return href ? <a href={href} class={buttonClass} data-label={label}>{children}</a>
        : <button class={buttonClass} data-label={label}>{children}</button>
    }
    
  • URL: /components/raw/button/index.jsx
  • Filesystem Path: components/01-atoms/input-elements/button/index.jsx
  • Size: 517 Bytes

Idee für Button Transitions hier: Tympanus