UHasselt Component Library

App Button: Icon Right 

<a href="#" class="atm-button button-red ">
      <span>
          <span class="text">
              This is a CTA Button
          </span>
          <span class="atm-icon fal fa-envelope   " aria-hidden="true"></span>
      </span>
  </a>
 
<{{element}}
    {{#if type}}type="{{type}}"{{/if}}
    {{#if title}}title="{{title}}"{{/if}}
    {{#if href}}href="{{href}}"{{/if}}
    {{#if target}}target="{{target}}"{{/if}}
    {{#if id}}id="{{id}}"{{/if}}
    {{#if isDisabled}}disabled{{/if}}
    class="atm-button {{#if modifier}}button-{{modifier}}{{/if}} {{#if noframe}}button-noframe{{/if}}">
    <span>
      {{#if iconBefore}}
        {{ render '@app-icon' iconBefore  }}
      {{/if}}
      {{#if text}}
      <span class="text">
        {{text}}
      </span>
      {{/if}}
      {{#if iconAfter}}
        {{ render '@app-icon' iconAfter  }}
      {{/if}}
    </span> 
  </{{element}}>
 
{
  "noframe": false,
  "text": "This is a CTA Button",
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "iconBefore": false,
  "isDisabled": false,
  "modifier": "red",
  "iconAfter": {
    "style": "fal",
    "icon": "fa-envelope"
  }
}
  • Content: 
    .atm-button {
    @apply inline-block mb-4 relative;

    > span {
        @apply inline-block relative font-semibold border-solid rounded cursor-pointer leading-5 top-0 left-0 px-3 md:px-8 select-none bg-red text-white border-red w-full;

        z-index: 0;
        transition: top 50ms, left 50ms, background-color 100ms,
            border-color 100ms;
        font-size: 1rem;
        border-width: 1px;
        @apply pt-3 pb-3 md:pt-[15px] md:pb-[15px];
        z-index: 1;

        .atm-icon + .text,
        .text + .atm-icon {
            @apply ml-2;
        }
    }

    .text {
        display: inline-block;
        @apply text-sm md:text-md;

        &::first-letter {
            text-transform: capitalize;
        }
    }

    &::after {
        @apply block absolute top-1 left-1 w-full h-full border-solid rounded;
        transition: border-color 100ms;
        content: '';
        z-index: 0;
        border-width: 1px;
    }

    &.button-noframe {
        &::after {
            display: none;
        }
    }

    &,
    &:hover {
        @apply no-underline;
    }

    &:active {
        > span {
            @apply top-1 left-1;
        }
    }

    &.button-white {
        > span {
            @apply bg-white text-black border-gray-900;
        }

        &::after {
            @apply border-white;
        }

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }

    &.button-red {
        > span {
            @apply bg-red text-white border-red;
        }

        &::after {
            @apply border-red;
        }

        &:hover {
            > span {
                @apply bg-red-600 border-red-600;
            }

            &::after {
                @apply border-red-600;
            }
        }
    }

    &.button-gray {
        > span {
            @apply bg-gray text-black border-gray;
        }

        &::after {
            @apply border-gray;
        }

        &:hover {
            > span {
                @apply bg-gray-600 border-gray-600;
            }

            &::after {
                @apply border-gray-600;
            }
        }
    }
}
  • URL: /components/raw/app-button/app-button.css
  • Filesystem Path: src\components\07-app-atoms\app-button\app-button.css
  • Size: 2.3 KB

No notes defined.