UHasselt Component Library

Button: White Border 

<a href="#" class="button button-white-border ">
      <span>
          <span class="icon fal fa-envelope   " aria-hidden="true"></span>
          <span class="text">
              This is a CTA Button
          </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="button {{#if modifier}}button-{{modifier}}{{/if}} {{#if noframe}}button-noframe{{/if}}">
    <span>
      {{#if iconBefore}}
        {{ render '@icon' iconBefore  }}
      {{/if}}
      {{#if text}}
      <span class="text">
        {{text}}
      </span>
      {{/if}}
      {{#if iconAfter}}
        {{ render '@icon' iconAfter  }}
      {{/if}}
    </span> 
  </{{element}}>
 
{
  "noframe": false,
  "text": "This is a CTA Button",
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "iconBefore": {
    "style": "fal",
    "icon": "fa-envelope"
  },
  "isDisabled": false,
  "modifier": "white-border"
}
  • Content: 
    .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-8 select-none bg-black text-white border-black w-full;

        z-index: 0;
        transition: top 50ms, left 50ms, background-color 100ms,
            border-color 100ms;
        font-size: 1rem;
        border-width: 1px;
        padding-top: 15px;
        padding-bottom: 15px;
        z-index: 1;

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

    .text {
        display: inline-block;

        &::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-white-sm {
        > span {
            @apply bg-white text-black border-gray-900 p-1;
        }

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

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }

    &.button-red,
    .button-red-submit {
        > 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;
            }
        }
    }

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

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

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

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

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

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

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }

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

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

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }
}
  • URL: /components/raw/button/button.css
  • Filesystem Path: src\components\02-atoms\button\button.css
  • Size: 3.5 KB

No notes defined.