Button

Button: Default

Component Preview
<a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
    More News
    <i class="fas fa-arrow-right"></i>
</a>
  • Content:
    .bttn {
      border: none;
      display: inline-block;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      line-height: 1.4;
      font-size: 1.25rem;
      padding: 1rem 2rem 1rem;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto; }
      .bttn i,
      .bttn svg {
        margin-left: 0.625rem; }
      .bttn--primary {
        color: #151515;
        background: #FFCD00;
        border: 1px solid #FFCD00; }
        .bttn--primary i,
        .bttn--primary svg,
        .bttn--primary span {
          color: #fff; }
        .bttn--primary:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 100%;
          height: 4px;
          background-color: #FFCD00;
          transform-origin: center;
          transform: translate(-50%, 0) scaleX(0);
          transition: transform 0.3s ease-in-out; }
        .bttn--primary:focus {
          text-decoration: underline; }
        .bttn--primary:hover::after, .bttn--primary:focus::after {
          transform: translate(-50%, 0) scaleX(1); }
        .bttn--primary:after {
          background-color: #151515; }
      .bttn--secondary {
        color: #fff;
        background: #151515;
        border: 1px solid #151515; }
        .bttn--secondary i,
        .bttn--secondary svg,
        .bttn--secondary span {
          color: #FFCD00; }
        .bttn--secondary:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 100%;
          height: 4px;
          background-color: #FFCD00;
          transform-origin: center;
          transform: translate(-50%, 0) scaleX(0);
          transition: transform 0.3s ease-in-out; }
        .bttn--secondary:focus {
          text-decoration: underline; }
        .bttn--secondary:hover::after, .bttn--secondary:focus::after {
          transform: translate(-50%, 0) scaleX(1); }
        .bttn--secondary__light {
          color: #fff; }
      .bttn--tertiary {
        color: #151515;
        background: #fff;
        border: none; }
        .bttn--tertiary i,
        .bttn--tertiary svg,
        .bttn--tertiary span {
          color: #FFCD00; }
        .bttn--tertiary:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 100%;
          height: 4px;
          background-color: #FFCD00;
          transform-origin: center;
          transform: translate(-50%, 0) scaleX(0);
          transition: transform 0.3s ease-in-out; }
        .bttn--tertiary:focus {
          text-decoration: underline; }
        .bttn--tertiary:hover::after, .bttn--tertiary:focus::after {
          transform: translate(-50%, 0) scaleX(1); }
      .bttn--full {
        display: flex; }
      .bttn--outline {
        border: 1px solid #FFCD00;
        border: 1px solid; }
        .bttn--outline.bttn--tertiary {
          background: none; }
        [class*=bg--gray] .bttn--outline.bttn--secondary:hover,
        [class*=bg--gold] .bttn--outline.bttn--secondary:hover,
        .bg-pattern--brain-reversed .bttn--outline.bttn--secondary:hover,
        .bg-pattern--brain .bttn--outline.bttn--secondary:hover,
        [class*=bg--white] .bttn--outline.bttn--secondary:hover, [class*=bg--gray] .bttn--outline.bttn--secondary:focus,
        [class*=bg--gold] .bttn--outline.bttn--secondary:focus,
        .bg-pattern--brain-reversed .bttn--outline.bttn--secondary:focus,
        .bg-pattern--brain .bttn--outline.bttn--secondary:focus,
        [class*=bg--white] .bttn--outline.bttn--secondary:focus {
          background: #151515; }
        [class*=bg--black] [class*=bg--white] .bttn--outline.bttn--secondary:hover,
        .bg-pattern--brain-black [class*=bg--white] .bttn--outline.bttn--secondary:hover,
        [class*=bg--black] [class*=bg--gray] .bttn--outline.bttn--secondary:hover,
        .bg-pattern--brain-black [class*=bg--gray] .bttn--outline.bttn--secondary:hover, [class*=bg--black] [class*=bg--white] .bttn--outline.bttn--secondary:focus,
        .bg-pattern--brain-black [class*=bg--white] .bttn--outline.bttn--secondary:focus,
        [class*=bg--black] [class*=bg--gray] .bttn--outline.bttn--secondary:focus,
        .bg-pattern--brain-black [class*=bg--gray] .bttn--outline.bttn--secondary:focus {
          color: #fff; }
        .bttn--outline:hover, .bttn--outline:focus {
          background: #fff;
          color: #151515; }
          .bttn--outline:hover:after, .bttn--outline:focus:after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 100%;
            height: 4px;
            background-color: #FFCD00;
            transform-origin: center;
            transform: translate(-50%, 0) scaleX(0);
            transition: transform 0.3s ease-in-out; }
          .bttn--outline:hover:focus, .bttn--outline:focus:focus {
            text-decoration: underline; }
          .bttn--outline:hover:hover::after, .bttn--outline:hover:focus::after, .bttn--outline:focus:hover::after, .bttn--outline:focus:focus::after {
            transform: translate(-50%, 0) scaleX(1); }
          [class*=bg--black] .bttn--outline:hover,
          .bg-pattern--brain-black .bttn--outline:hover, [class*=bg--black] .bttn--outline:focus,
          .bg-pattern--brain-black .bttn--outline:focus {
            border: 1px solid #fff;
            color: #fff;
            background: transparent; }
          [class*=bg--black] [class*=bg--white] .bttn--outline:hover,
          .bg-pattern--brain-black [class*=bg--white] .bttn--outline:hover, [class*=bg--black] [class*=bg--white] .bttn--outline:focus,
          .bg-pattern--brain-black [class*=bg--white] .bttn--outline:focus {
            border: 1px solid #FFCD00;
            color: inherit; }
          [class*=bg--black] [class*=bg--white] .bttn--outline:hover,
          .bg-pattern--brain-black [class*=bg--white] .bttn--outline:hover,
          [class*=bg--black] [class*=bg--gray] .bttn--outline:hover,
          .bg-pattern--brain-black [class*=bg--gray] .bttn--outline:hover,
          [class*=bg--black] [class*=bg--gold] .bttn--outline:hover,
          .bg-pattern--brain-black .bg--gold .bttn--outline:hover, [class*=bg--black] [class*=bg--white] .bttn--outline:focus,
          .bg-pattern--brain-black [class*=bg--white] .bttn--outline:focus,
          [class*=bg--black] [class*=bg--gray] .bttn--outline:focus,
          .bg-pattern--brain-black [class*=bg--gray] .bttn--outline:focus,
          [class*=bg--black] [class*=bg--gold] .bttn--outline:focus,
          .bg-pattern--brain-black .bg--gold .bttn--outline:focus {
            border: 1px solid #151515;
            color: #151515; }
          [class*=bg--white] .bttn--outline:hover:after,
          [class*=bg--gold] [class*=bg--white] .bttn--outline:hover:after,
          .bg-pattern--brain-reversed [class*=bg--white] .bttn--outline:hover:after, [class*=bg--white] .bttn--outline:focus:after,
          [class*=bg--gold] [class*=bg--white] .bttn--outline:focus:after,
          .bg-pattern--brain-reversed [class*=bg--white] .bttn--outline:focus:after {
            background: #FFCD00; }
          [class*=bg--gold] .bttn--outline:hover:after,
          .bg-pattern--brain-reversed .bttn--outline:hover:after, [class*=bg--gold] .bttn--outline:focus:after,
          .bg-pattern--brain-reversed .bttn--outline:focus:after {
            background: #fff; }
      .bttn--transparent {
        background: transparent; }
        .bttn--transparent:hover, .bttn--transparent:focus {
          background: #fff;
          border: 1px solid white; }
      .bttn--caps {
        text-transform: uppercase;
        font-family: "Antonio", sans-serif; }
      .bttn--sans-serif {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-size: .9rem;
        letter-spacing: .04rem;
        display: inline-block; }
        .bttn--sans-serif:focus {
          text-decoration: underline; }
        .bttn--sans-serif i,
        .bttn--sans-serif span {
          font-size: .9rem; }
      .bttn--link {
        color: #000; }
        .bttn--link:hover, .bttn--link:focus {
          border: none;
          transform: none; }
          .bttn--link:hover i,
          .bttn--link:hover svg,
          .bttn--link:hover span, .bttn--link:focus i,
          .bttn--link:focus svg,
          .bttn--link:focus span {
            color: #000; }
          .bttn--link:hover:hover::after, .bttn--link:hover:focus::after, .bttn--link:focus:hover::after, .bttn--link:focus:focus::after {
            transform: none; }
      .bttn__apply {
        margin-top: unset;
        padding: .7rem;
        border: 1px solid #fff;
        font-size: .95rem;
        display: none; }
        @media (min-width: 768px) {
          .bttn__apply {
            display: block; } }
    
    [class*=bg--gray] .bttn--primary,
    [class*=bg--white] .bttn--primary,
    .bg-pattern--brain .bttn--primary {
      border: none; }
    
    .bg-pattern--brain-reversed .bttn--primary,
    [class*=bg--gold] .bttn--primary {
      background: #151515;
      color: #FFCD00; }
    
    .bg-pattern--brain-reversed [class*=bg--gray] .bttn--primary,
    [class*=bg--gold] [class*=bg--gray] .bttn--primary,
    .bg-pattern--brain-reversed [class*=bg--white] .bttn--primary,
    [class*=bg--gold] [class*=bg--white] .bttn--primary {
      background: #FFCD00;
      color: #151515;
      border: none; }
    
    .bg-pattern--brain-black .bttn--primary,
    [class*=bg--black] .bttn--primary {
      color: #151515; }
    
    [class*=bg-] [class*=bg--gray] .bttn--tertiary {
      border-color: #151515; }
    
    .bg-pattern--brain-black .bttn--tertiary:not([class*="bttn--outline"]),
    [class*=bg--black] .bttn--tertiary:not([class*="bttn--outline"]) {
      color: #151515; }
    
    [class*=bg-] [class*=bg--gray] .bttn--secondary,
    [class*=bg-] [class*=bg--white] .bttn--secondary,
    [class*=bg-] [class*=bg--gold] .bttn--secondary,
    [class*=bg--white] .bttn--secondary,
    [class*=bg--gray] .bttn--secondary,
    [class*=bg--gold] .bttn--secondary,
    .bg-pattern--brain-reversed .bttn--secondary,
    .bg-pattern--brain .bttn--secondary {
      color: #fff;
      border: none; }
    
    .bg-pattern--brain-reversed .bttn--tertiary i,
    [class*=bg--gold] .bttn--tertiary i, .bg-pattern--brain-reversed
    .bttn--tertiary span,
    [class*=bg--gold]
    .bttn--tertiary span, .bg-pattern--brain-reversed
    .bttn--tertiary svg,
    [class*=bg--gold]
    .bttn--tertiary svg {
      color: inherit; }
    
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/components/button/button.css
  • Size: 9.7 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    .bttn {
      @include bttn;
    
      &--primary {
        @include bttn--primary;
        border: 1px solid $primary;
        @include bttn--focus;
    
        &:after {
          background-color: $secondary;
        }
      }
    
      &--secondary {
        @include bttn--secondary;
        border: 1px solid $secondary;
        @include bttn--focus;
    
        &__light {
          @include bttn--secondary__light;
        }
      }
    
      &--tertiary {
        @include bttn--tertiary;
        @include bttn--focus;
        background: #fff;
        border: none;
    
        &:hover,
        &:focus {
          //border: 1px solid #999;
        }
      }
    
      &--full {
        @include bttn--full;
      }
    
      &--outline {
        @include bttn--outline;
        border: 1px solid;
    
        &.bttn--tertiary {
          background: none;
        }
    
        &.bttn--secondary {
    
          &:hover,
          &:focus {
    
            [class*=bg--gray] &,
            [class*=bg--gold] &,
            .bg-pattern--brain-reversed &,
            .bg-pattern--brain &,
            [class*=bg--white] & {
              background: $secondary;
            }
    
            [class*=bg--black] [class*=bg--white] &,
            .bg-pattern--brain-black [class*=bg--white] &,
            [class*=bg--black] [class*=bg--gray] &,
            .bg-pattern--brain-black [class*=bg--gray] & {
              color: #fff;
            }
          }
        }
    
        .bg--gold & {
          //border: 1px solid #fff;
        }
    
        .bg--black & {
          //color: #fff;
        }
    
        i,
        svg {
          .bg--gold & {
            // color: #fff;
          }
        }
    
        &:hover,
        &:focus {
          background: #fff;
          color: $secondary;
          @include bttn--focus;
    
          [class*=bg--black] &,
          .bg-pattern--brain-black & {
            border: 1px solid #fff;
            color: #fff;
            background: transparent;
          }
    
          [class*=bg--black] [class*=bg--white] &,
          .bg-pattern--brain-black [class*=bg--white] & {
            border: 1px solid $primary;
            color: inherit;
          }
    
          [class*=bg--black] [class*=bg--white] &,
          .bg-pattern--brain-black [class*=bg--white] &,
          [class*=bg--black] [class*=bg--gray] &,
          .bg-pattern--brain-black [class*=bg--gray] &,
          [class*=bg--black] [class*=bg--gold] &,
          .bg-pattern--brain-black .bg--gold & {
            border: 1px solid $secondary;
            color: $secondary;
    
          }
    
          &:after {
    
    
            [class*=bg--white] &,
            [class*=bg--gold] [class*=bg--white] &,
            .bg-pattern--brain-reversed [class*=bg--white] & {
              background: $primary;
            }
    
            [class*=bg--gold] &,
            .bg-pattern--brain-reversed & {
              background: #fff;
            }
          }
        }
      }
    
      &--transparent {
        @include bttn--transparent;
    
        &:hover,
        &:focus {
          background: #fff;
          border: 1px solid white;
        }
      }
    
      &--caps {
        text-transform: uppercase;
        font-family: $font-family-caps-bold;
      }
    
      &--sans-serif {
        font-family: $font-family-sans-serif;
        font-weight: $font-weight-normal;
        font-size: .9rem;
        letter-spacing: .04rem;
        display: inline-block;
    
        &:focus {
          text-decoration: underline;
        }
    
        i,
        span {
          font-size: .9rem;
        }
      }
    
      &--link {
        color: #000;
    
        &:hover,
        &:focus {
    
          i,
          svg,
          span {
            color: #000;
          }
    
          border: none;
          transform: none;
          //background: #fff;
    
          &:hover::after,
          &:focus::after {
            transform: none;
          }
        }
      }
    
      // @todo remove or move to uids_base?
      &__apply {
        margin-top: unset;
        padding: .7rem;
        border: 1px solid $white;
        font-size: .95rem;
        display: none;
    
        @include breakpoint(sm) {
          display: block;
        }
      }
    
      .card & {
    
        &:after {
          .bg--gold & {
            //background-color: #fff;
          }
        }
    
        .bg--black &,
        .bg--gold &,
        [class*=bg--gray] & {
          //padding: 0 0 .4rem 0;
        }
    
        [class*=bg--gray] & {
          //border-color: $grey;
        }
    
        .bg--black & {
          //color: $primary;
        }
      }
    
    }
    
    // color contrast
    
    .bttn--primary {
    
      [class*=bg--gray] &,
      [class*=bg--white] &,
      .bg-pattern--brain & {
        border: none;
      }
    
      .bg-pattern--brain-reversed &,
      [class*=bg--gold] & {
        background: $secondary;
        color: $primary;
      }
    
      .bg-pattern--brain-reversed [class*=bg--gray] &,
      [class*=bg--gold] [class*=bg--gray] &,
      .bg-pattern--brain-reversed [class*=bg--white] &,
      [class*=bg--gold] [class*=bg--white] & {
        background: $primary;
        color: $secondary;
        border: none;
      }
    
      .bg-pattern--brain-black &,
      [class*=bg--black] & {
        color: $secondary;
      }
    }
    
    .bttn--tertiary {
      [class*=bg-] [class*=bg--gray] & {
        border-color: $secondary;
      }
      &:not([class*="bttn--outline"]) {
        .bg-pattern--brain-black &,
        [class*=bg--black] & {
          color: $secondary;
        }
      }
    }
    
    .bttn--secondary {
      [class*=bg-] [class*=bg--gray] &,
      [class*=bg-] [class*=bg--white] &,
      [class*=bg-] [class*=bg--gold] &,
      [class*=bg--white] &,
      [class*=bg--gray] &,
      [class*=bg--gold] &,
      .bg-pattern--brain-reversed &,
      .bg-pattern--brain & {
        color: #fff;
        border: none;
      }
    }
    
    .bttn--tertiary i,
    .bttn--tertiary span,
    .bttn--tertiary svg {
      .bg-pattern--brain-reversed &,
      [class*=bg--gold] & {
        color: inherit;
      }
    }
    
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/button/button.scss
  • Size: 5.2 KB