Vebego Component Library
<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>
<{{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}}>
{
  "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": ""
    }
  ]
}
  • 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.