<button class="button button--outlined">View New Arrivals</button>
<button class="button button--{{modifier}}{{#if disabled}} js-button-disabled{{/if}}{{#if buttonModal}} js-modal-open-link{{/if}}{{#if classes}}{{#each classes}} {{this}}{{/each}}{{/if}}"{{#if buttonModal}} data-modal-id="{{buttonModal}}"{{/if}}{{#if buttonModalVideo}} data-modal-video="{{buttonModalVideo}}"{{/if}}{{#if id}} id="{{id}}"{{/if}}{{#if noValidate}} formnovalidate{{/if}}{{#if buttonType}} type="{{buttonType}}"{{/if}}>{{buttonValue}}{{#if spinner}}{{render '@spinner'}}{{/if}}</button>
{
  "modifier": "outlined",
  "buttonValue": "View New Arrivals"
}
  • Content:
    .button {
      @include reset-button;
      @include text-ui($color-darkest);
      display: inline-block;
      width: 280px;
      padding: 0 10px;
      line-height: 5.0rem;
      text-align: center;
      text-decoration: none;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-xl) {
        width: auto;
        min-width: 100px;
        max-width: 300px;
        padding: 0 20px;
      }
    }
    
    .button--primary {
      transition: background-color $transition-standard;
      background-color: $color-primary;
      color: $color-white;
    
      &:hover,
      &:focus {
        background-color: $color-primary-hover;
      }
    }
    
    .button--disabled,
    .js-button-disabled {
      background-color: $color-light;
      color: $color-white;
      pointer-events: none !important;
    }
    
    .button--outlined {
      transition: color $transition-standard;
      border: 1px solid $color-primary;
      color: $color-dark;
      line-height: 4.8rem;
    
      &:hover,
      &:focus {
        color: $color-primary;
      }
    }
    
    .button--plain-text {
      width: auto;
      padding: 0 10px;
      transition: color $transition-standard;
      background-color: transparent;
      color: $color-primary;
      font-weight: $font-weight-normal;
      letter-spacing: 1px;
      text-transform: none;
      -webkit-font-smoothing: subpixel-antialiased;
    
      &:hover,
      &:focus {
        color: $color-primary-hover;
      }
    
      @include breakpoint($breakpoint-md) {
        min-width: 0;
      }
    }
    
    .button--centered {
      display: block;
      margin: 0 auto;
    }
    
  • URL: /components/raw/buttons/buttons.scss
  • Filesystem Path: src/components/01-elements/buttons/buttons.scss
  • Size: 1.5 KB

There are no notes for this item.