Button

<style>
    body {
        background: black;
    }
</style>
<button class='large'>Watch story</button>
<button>Watch story</button>
<button class="small">Learn more</button>
<style>
  body {
    background: black;
  }
</style>
<button class='large'>Watch story</button>
<button>Watch story</button>
<button class="small">Learn more</button>
/* No context defined for this component. */
  • Content:
    button,
    .button {
      $border-radius: 30px;
      $font-size: 13.44px;
      $font-size-large: 17.92px;
      $font-size-small: 11.44px;
      $button-padding: 5px 15px;
      $border-width-large: 1.76px;
      $border-width-small: 1.32px;
      $border-width: 1.41px;
      border-radius: $border-radius;
      color: $white;
      border: solid $white;
      background-color: transparent;
      font-weight: 700;
      border-width: $border-width;
      padding: 6px 12px;
      transition: background-color 200ms ease-out;
      white-space: nowrap;
    
      &:hover {
        background-color: $green;
        cursor: pointer;
      }
    
      &.large {
        padding: 8.7px 22px;
        font-size: $font-size-large;
        border-width: $border-width-large;
      }
    
      &.small {
        padding: 6px 22.5px;
        border-width: $border-width-small;
        font-size: $font-size-small;
      }
    
      @include respond-above(md) {
        $font-size: 15px;
        $font-size-large: 19px;
        $font-size-small: 10.5px;
        $border-width-large: 1.9px;
        $border-width-small: 1px;
        $border-width: 1px;
        padding: 7.5px 16px;
        border-width: $border-width;
        font-size: $font-size;
        letter-spacing: 0.7px;
    
        &.large {
          padding: 10.9px 25px;
          font-size: $font-size-large;
          border-width: $border-width-large;
        }
    
        &.small {
          padding: 6.7px 10px;
          font-size: $font-size-small;
          border-width: $border-width-small;
        }
      }
    
      @include respond-above(lg) {
        $font-size: 17.92px;
        $font-size-large: 22.4px;
        $font-size-small: 13.44px;
        $border-width-large: 2.2px;
        $border-width-small: 1.32px;
        $border-width: 1.75px;
        padding: 9px 19px;
        border-width: $border-width;
        font-size: $font-size;
        letter-spacing: 0.7px;
    
        &.large {
          padding: 10.9px 25px;
          font-size: $font-size-large;
          border-width: $border-width-large;
        }
    
        &.small {
          padding: 6.7px 10px;
          font-size: $font-size-small;
          border-width: $border-width-small;
        }
      }
    }
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: structures/01-atoms/button/_button.scss
  • Size: 1.9 KB

There are no notes for this item.