Vebego Component Library

Button Secondary 

<!-- Icon Right (Default) -->
<a class="atm-button atm-button-secondary button-md ">
    <span class="button-content">
        <span>Lees de klantcase</span>
        <span class="atm-icon  far fa-long-arrow-right   "></span>
    </span>
    <span class="button-underline"></span>
</a>


<!-- Icon Left -->
<a class="atm-button atm-button-secondary button-md ">
    <span class="button-content">
        <span class="atm-icon  far fa-long-arrow-right   "></span>
        <span>Lees de klantcase</span>
    </span>
    <span class="button-underline"></span>
</a>


<{{element}}
  class="atm-button atm-button-secondary {{modifier}} {{#unless text}}button-icon-only{{/unless}}"
  {{#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}}
  {{#if dataset}}
    {{#each dataset}}
    {{#if key}}{{#if value}}
    data-{{key}}="{{value}}"
    {{/if}}{{/if}}
    {{/each}}
  {{/if}}>
    <span class="button-content">
    {{#if iconLeft}}
      {{#if icon}}{{render '@icon' icon}}{{/if}}
      {{#if text}}<span>{{text}}</span>{{/if}}
    {{else}}
      {{#if text}}<span>{{text}}</span>{{/if}}
      {{#if icon}}{{render '@icon' icon}}{{/if}}
    {{/if}}
    </span>
    <span class="button-underline"></span>
</{{element}}>
 
/* Icon Right (Default) */
{
  "modifier": "button-md",
  "text": "Lees de klantcase",
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "",
  "id": "",
  "isDisabled": false,
  "iconLeft": false,
  "icon": {
    "style": "far",
    "icon": "fa-long-arrow-right"
  },
  "dataset": [
    {
      "key": "",
      "value": ""
    }
  ]
}


/* Icon Left */
{
  "modifier": "button-md",
  "text": "Lees de klantcase",
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "",
  "id": "",
  "isDisabled": false,
  "iconLeft": true,
  "icon": {
    "style": "far",
    "icon": "fa-long-arrow-right"
  },
  "dataset": [
    {
      "key": "",
      "value": ""
    }
  ]
}
  • Content: 
    .atm-button-secondary {
    @apply relative;
    @apply inline-block;
    @apply overflow-hidden;
    @apply text-md;
    @apply font-display;
    @apply font-normal;
    @apply text-navy;
    @apply cursor-pointer;

    &.button-lg {
        &.button-icon-only {
        }
    }

    /* Default */
    &.button-md {
        &.button-icon-only {
        }
    }

    &.button-sm {
        &.button-icon-only {
        }
    }

    .button-content {
        @apply inline-block relative z-20;

        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 2px;

        .atm-icon + span,
        span + .atm-icon {
            @apply ml-1;
        }
    }

    .button-underline {
        @apply block absolute z-10 bottom-0 left-0 right-0;
        @apply transform-gpu transition-all;
        @apply bg-cta;
        @apply h-0.5;
    }

    &:hover {
        .button-underline {
            background-color: #d0ecfa;
            @apply h-3;
        }
    }
}
  • URL: /components/raw/button-secondary/button-secondary.css
  • Filesystem Path: src\components\02-atoms\button\button-secondary\button-secondary.css
  • Size: 1 KB

No notes defined.