ETR Component Library

button: Outline 

<a href="www.expandtheroom.com" class="button button--outline">
    Learn More
  </a>

<a href="www.expandtheroom.com" class="button button--outline button--outline--hover ml-4 mb-4">
      Hover
  </a>
<a href="www.expandtheroom.com" class="button button--outline button--outline--active ml-4 mb-4">
      Active
  </a>
<a href="www.expandtheroom.com" class="button button--outline focus ml-4 mb-4">
      Focus
  </a>
<a href="www.expandtheroom.com" class="button button--outline button--outline--disabled ml-4 mb-4">
      Disabled
  </a>
 
{{#if url}}
  <a href="{{url}}" class="button button--outline">
    {{text}}
  </a>
{{else}}
  <button class="button button--outline">
    {{text}} </button>
{{/if}}

{{#if showStates}}
  <a href="{{url}}" class="button button--outline button--outline--hover ml-4 mb-4">
      Hover
  </a>
  <a href="{{url}}" class="button button--outline button--outline--active ml-4 mb-4">
      Active
  </a>
  <a href="{{url}}" class="button button--outline focus ml-4 mb-4">
      Focus
  </a>
  <a href="{{url}}" class="button button--outline button--outline--disabled ml-4 mb-4">
      Disabled
  </a>
{{/if}}
 
{
  "text": "Learn More",
  "url": "www.expandtheroom.com",
  "showStates": true
}
  • Content: 
    .button {

  &:hover,
  &--default--hover,
  &--outline--hover {
    @apply shadow-lg;
  }

  &--default {
    @apply font-sans font-bold uppercase text-xs transition tracking-wider leading-none py-4 px-6 bg-primary text-white inline-block no-underline;
    padding-bottom: .875rem !important;

    &:hover, &--hover {
      @apply bg-primary-dark;
    }

    &:active, &--active, &--active:hover {
      @apply bg-primary-darker;
    }

    &--disabled, &:disabled {
      @apply bg-gray-dark pointer-events-none;
    }
  }

  &--icon {
    @apply pl-4;

    svg {
      @apply mr-2 w-4 h-auto stroke-current;
    }

    &--right {
        @apply pl-6 pr-4;

      svg {
        @apply mr-0 ml-2 w-4 h-auto stroke-current;
      }
    }
  }

  &--outline {
    @apply button--default bg-transparent text-primary border border-solid border-primary;

    &:hover, &--hover {
      @apply text-white bg-primary;
    }

    &:active, &--active, &--active:hover {
      @apply bg-primary-dark border-primary-dark text-white;
    }

    &--disabled, &:disabled {
      @apply bg-gray-dark border-gray-dark pointer-events-none text-white;
    }

    &.button--white {
      @apply text-white border-white;

      &:hover, &.button--outline--hover {
        @apply text-white bg-primary-light border-primary-light;
      }

      &:active, &.button--outline--active, &.button--outline--active:hover {
        @apply bg-primary-dark;
      }
    }
  }

  &:not([disabled]).focus, &:not([disabled]):focus {
    box-shadow: 0 0 0 3px theme('colors.primary.transparent');

    &.rounded {
      outline: 0;
      &:after {
        content:'';
        @apply block bg-primary-light rounded;
      }
    }

    &.rounded-full {
      outline: 0;
      box-shadow: 0 0 0 3px theme('colors.primary.transparent');
    }
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: components/01-base-components/button/button.scss
  • Size: 1.8 KB

There are no notes for this item.