There's a new version of UIDS!

UIDS - UI Design System

Button

Button: Button Outline

Component Preview 
<a href="" class="bttn bttn--outline 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: var(--brand-secondary);
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary); }
    .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: var(--brand-primary);
      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: var(--brand-secondary); }
    [class*="bg--"] [class*="bg--black"] .bttn--primary,
    [class*="bg--black"] .bttn--primary {
      color: var(--brand-secondary); }
    [class*="bg--"] [class*="bg--gray"] .bttn--primary,
    [class*="bg--"] [class*="bg--white"] .bttn--primary,
    [class*="bg--gray"] .bttn--primary,
    [class*="bg--white"] .bttn--primary {
      border-color: var(--brand-primary); }
  .bttn--secondary {
    color: #fff;
    background: var(--brand-secondary);
    border: 1px solid var(--brand-secondary); }
    .bttn--secondary i,
    .bttn--secondary svg,
    .bttn--secondary span {
      color: var(--brand-primary); }
    .bttn--secondary:after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 4px;
      background-color: var(--brand-primary);
      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; }
    [class*="bg--black"] .bttn--secondary {
      color: #fff; }
    [class*="bg-"] [class*="bg--gray"] .bttn--secondary,
    [class*="bg-"] [class*="bg--white"] .bttn--secondary,
    [class*="bg--white"] .bttn--secondary,
    [class*="bg--gray"] .bttn--secondary,
    .bg-pattern--brain-reversed .bttn--secondary,
    .bg-pattern--brain .bttn--secondary {
      color: #fff; }
    [class*="bg--gold"] .bttn--secondary,
    [class*="bg-"] [class*="bg--gold"] .bttn--secondary {
      color: #fff; }
  .bttn--tertiary {
    color: var(--brand-secondary);
    background: #fff;
    border: 1px solid #fff; }
    .bttn--tertiary i,
    .bttn--tertiary svg,
    .bttn--tertiary span {
      color: var(--brand-primary); }
    .bttn--tertiary:after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 4px;
      background-color: var(--brand-primary);
      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); }
    [class*="bg--black"] .bttn--tertiary {
      color: #fff; }
    .bg-pattern--brain-black .bttn--tertiary:not([class*="bttn--outline"]),
    [class*="bg--black"] .bttn--tertiary:not([class*="bttn--outline"]) {
      color: var(--brand-secondary); }
  .bttn--full {
    display: flex; }
  .bttn--outline {
    border: 1px solid var(--brand-primary);
    border: 1px solid; }
    [class*="bg--gray"] .bttn--outline,
    [class*="bg--white"] .bttn--outline,
    [class*="bg--gold"] .bttn--outline,
    [class*="bg--"] [class*="bg--gray"] .bttn--outline,
    [class*="bg--"] [class*="bg--white"] .bttn--outline,
    [class*="bg--"] [class*="bg--gold"] .bttn--outline {
      border-color: rgba(0, 0, 0, 0.425); }
    [class*="bg--black"] .bttn--outline {
      border-color: rgba(255, 255, 255, 0.425); }
    .bttn--outline:focus, .bttn--outline:hover {
      color: var(--brand-secondary); }
      .bttn--outline:focus:after, .bttn--outline:hover:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: 4px;
        background-color: var(--brand-primary);
        transform-origin: center;
        transform: translate(-50%, 0) scaleX(0);
        transition: transform 0.3s ease-in-out; }
      .bttn--outline:focus:focus, .bttn--outline:hover:focus {
        text-decoration: underline; }
      .bttn--outline:focus:hover::after, .bttn--outline:focus:focus::after, .bttn--outline:hover:hover::after, .bttn--outline:hover:focus::after {
        transform: translate(-50%, 0) scaleX(1); }
      [class*="bg--black"] .bttn--outline:focus,
      .bg-pattern--brain-black .bttn--outline:focus, [class*="bg--black"] .bttn--outline:hover,
      .bg-pattern--brain-black .bttn--outline:hover {
        border: 1px solid #fff;
        color: #fff;
        background: transparent; }
      [class*="bg--black"] [class*="bg--white"] .bttn--outline:focus,
      .bg-pattern--brain-black [class*="bg--white"] .bttn--outline:focus, [class*="bg--black"] [class*="bg--white"] .bttn--outline:hover,
      .bg-pattern--brain-black [class*="bg--white"] .bttn--outline:hover {
        border: 1px solid var(--brand-primary);
        color: inherit; }
      [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, [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 {
        border: 1px solid var(--brand-secondary);
        color: var(--brand-secondary); }
      [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, [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 {
        background: var(--brand-primary); }
      [class*="bg--gold"] .bttn--outline:focus:after,
      .bg-pattern--brain-reversed .bttn--outline:focus:after, [class*="bg--gold"] .bttn--outline:hover:after,
      .bg-pattern--brain-reversed .bttn--outline:hover:after {
        background: #fff; }
    .bttn--outline.bttn--tertiary {
      background: none; }
      [class*="bg--black"] [class*="bg--white"] .bttn--outline.bttn--tertiary,
      [class*="bg--black"] [class*="bg--gray"] .bttn--outline.bttn--tertiary,
      [class*="bg--black"] [class*="bg--gold"] .bttn--outline.bttn--tertiary {
        color: var(--brand-secondary); }
      [class*="bg--gold"] .bttn--outline.bttn--tertiary i, [class*="bg--gold"]
      .bttn--outline.bttn--tertiary svg {
        color: #fff; }
      [class*="bg--gold"] [class*="bg--black"] .bttn--outline.bttn--tertiary i,
      [class*="bg--gold"] [class*="bg--gray"] .bttn--outline.bttn--tertiary i,
      [class*="bg--gold"] [class*="bg--white"] .bttn--outline.bttn--tertiary i, [class*="bg--gold"] [class*="bg--black"]
      .bttn--outline.bttn--tertiary svg,
      [class*="bg--gold"] [class*="bg--gray"]
      .bttn--outline.bttn--tertiary svg,
      [class*="bg--gold"] [class*="bg--white"]
      .bttn--outline.bttn--tertiary svg {
        color: var(--brand-primary); }
    [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, [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 {
      background: var(--brand-secondary); }
    [class*="bg--gray"] .bttn--outline.bttn--secondary:focus,
    [class*="bg--gold"] .bttn--outline.bttn--secondary:focus,
    [class*="bg--white"] .bttn--outline.bttn--secondary:focus,
    [class*="bg-"] [class*="bg--gold"] .bttn--outline.bttn--secondary:focus,
    [class*="bg--black"] [class*="bg--gold"] .bttn--outline.bttn--secondary:focus,
    .bg-pattern--brain-black .bg--gold .bttn--outline.bttn--secondary:focus,
    [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, [class*="bg--gray"] .bttn--outline.bttn--secondary:hover,
    [class*="bg--gold"] .bttn--outline.bttn--secondary:hover,
    [class*="bg--white"] .bttn--outline.bttn--secondary:hover,
    [class*="bg-"] [class*="bg--gold"] .bttn--outline.bttn--secondary:hover,
    [class*="bg--black"] [class*="bg--gold"] .bttn--outline.bttn--secondary:hover,
    .bg-pattern--brain-black .bg--gold .bttn--outline.bttn--secondary:hover,
    [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 {
      color: #fff; }
  .bttn--transparent {
    background: transparent; }
    .bttn--transparent:focus, .bttn--transparent:hover {
      background: #fff;
      border: 1px solid white; }
  .bttn--caps {
    text-transform: uppercase;
    font-family: "Antonio", "Antonio-fallback", sans-serif; }
  .bttn--lowercase {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem; }
  .bttn--sans-serif {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.04rem;
    display: inline-block; }
    .bttn--sans-serif:focus {
      text-decoration: underline; }
    .bttn--sans-serif i,
    .bttn--sans-serif span {
      font-size: 0.9rem; }
    .bttn--sans-serif.bttn--full {
      display: flex;
      height: 100%; }
  .bttn--link {
    color: #000; }
    .bttn--link:focus, .bttn--link:hover {
      border: none;
      transform: none; }
      .bttn--link:focus:focus::after, .bttn--link:focus:hover::after, .bttn--link:hover:focus::after, .bttn--link:hover:hover::after {
        transform: none; }
  .bttn__apply {
    margin-top: unset;
    padding: 0.7rem;
    border: 1px solid #fff;
    font-size: 0.95rem;
    display: none; }
    @media (min-width: 768px) {
      .bttn__apply {
        display: block; } }
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/components/button/button.css
  • Size: 11.9 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;
    }

    [class*="bg--"] [class*="bg--black"] &,
    [class*="bg--black"] & {
      color: $secondary;
    }

    [class*="bg--"] [class*="bg--gray"] &,
    [class*="bg--"] [class*="bg--white"] &,
    [class*="bg--gray"] &,
    [class*="bg--white"] & {
      border-color: $primary;
    }
  }

  &--secondary {
    @include bttn--secondary;
    border: 1px solid $secondary;
    @include bttn--focus;

    &__light {
      @include bttn--secondary__light;
    }

    [class*="bg--black"] & {
      color: #fff;
    }

    [class*="bg-"] [class*="bg--gray"] &,
    [class*="bg-"] [class*="bg--white"] &,
    [class*="bg--white"] &,
    [class*="bg--gray"] &,
    .bg-pattern--brain-reversed &,
    .bg-pattern--brain & {
      color: #fff;
    }

    [class*="bg--gold"] &,
    [class*="bg-"] [class*="bg--gold"] & {
      color: #fff;
    }
  }

  &--tertiary {
    @include bttn--tertiary;
    @include bttn--focus;
    background: #fff;
    border: 1px solid #fff;

    [class*="bg--black"] & {
      color: #fff;
    }

    &:not([class*="bttn--outline"]) {
      .bg-pattern--brain-black &,
      [class*="bg--black"] & {
        color: $secondary;
      }
    }
  }

  &--full {
    @include bttn--full;
  }

  &--outline {
    @include bttn--outline;
    border: 1px solid;

    [class*="bg--gray"] &,
    [class*="bg--white"] &,
    [class*="bg--gold"] &,
    [class*="bg--"] [class*="bg--gray"] &,
    [class*="bg--"] [class*="bg--white"] &,
    [class*="bg--"] [class*="bg--gold"] & {
      border-color: rgba(0,0,0,.425);
    }

    [class*="bg--black"] & {
      border-color: rgba(255,255,255,.425);
    }

    &:focus,
    &:hover {
      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;
        }
      }
    }

    &.bttn--tertiary {
      background: none;

      [class*="bg--black"] [class*="bg--white"] &,
      [class*="bg--black"] [class*="bg--gray"] &,
      [class*="bg--black"] [class*="bg--gold"] & {
        color: $secondary;
      }


      i,
      svg {
        [class*="bg--gold"] & {
          color: #fff;
        }

        [class*="bg--gold"] [class*="bg--black"] &,
        [class*="bg--gold"] [class*="bg--gray"] &,
        [class*="bg--gold"] [class*="bg--white"] & {
          color: $primary;
        }
      }
    }

    &.bttn--secondary {
      &:focus,
      &:hover {
        [class*="bg--gray"] &,
        [class*="bg--gold"] &,
        .bg-pattern--brain-reversed &,
        .bg-pattern--brain &,
        [class*="bg--white"] & {
          background: $secondary;
        }

        [class*="bg--gray"] &,
        [class*="bg--gold"] &,
        [class*="bg--white"] &,
        [class*="bg-"] [class*="bg--gold"] &,
        [class*="bg--black"] [class*="bg--gold"] &,
        .bg-pattern--brain-black .bg--gold &,
        [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;
        }
      }
    }
  }

  &--transparent {
    @include bttn--transparent;

    &:focus,
    &:hover {
      background: #fff;
      border: 1px solid white;
    }
  }

  &--caps {
    text-transform: uppercase;
    font-family: $font-family-caps-bold;
  }

  &--lowercase {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
  }

  &--sans-serif {
    font-family: $font-family-sans-serif;
    font-weight: $font-weight-normal;
    font-size: 0.9rem;
    letter-spacing: 0.04rem;
    display: inline-block;

    &:focus {
      text-decoration: underline;
    }

    i,
    span {
      font-size: 0.9rem;
    }

    &.bttn--full {
      display: flex;
      height: 100%;
    }
  }

  &--link {
    color: #000;

    &:focus,
    &:hover {
      border: none;
      transform: none;

      &:focus::after,
      &:hover::after {
        transform: none;
      }
    }
  }
  // @todo remove or move to uids_base?
  &__apply {
    margin-top: unset;
    padding: 0.7rem;
    border: 1px solid $white;
    font-size: 0.95rem;
    display: none;
    @include breakpoint(sm) {
      display: block;
    }
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/button/button.scss
  • Size: 5.4 KB