Vebego Component Library

Button Primary: Icon Left Md 

<a class="atm-button atm-button-primary  button-md icon-left   ">
    <div class="button-content-wrapper">
        <span class="button-content">
            <i class="atm-icon  fal fa-arrow-right   "></i>

            <span>Button</span>
        </span>
    </div>
    <span class="button-triangle"></span>
</a>
 
<{{element}}
  class="atm-button atm-button-primary {{class}} {{modifier}} {{#unless hasIcon}}no-icon{{/unless}} {{#unless text}}button-icon-only{{/unless}} {{#if lightVersion}}button-light{{/if}}"
  {{#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}}>
    <div class="button-content-wrapper">
      <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>
    </div>
    {{#if showTriangle}}
    <span class="button-triangle"></span>
    {{/if}}
</{{element}}>
 
{
  "modifier": "button-md icon-left",
  "text": "Button",
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "",
  "id": "",
  "class": "",
  "isDisabled": false,
  "iconLeft": true,
  "icon": {
    "style": "fal",
    "icon": "fa-arrow-right"
  },
  "dataset": [
    {
      "key": "",
      "value": ""
    }
  ],
  "showTriangle": true,
  "lightVersion": false,
  "hasIcon": true
}
  • Content: 
    .atm-button-primary {
    --scale: 1;

    @apply px-4 w-max;
    @apply overflow-hidden relative inline-block bg-accent-1 rounded-full cursor-pointer;
    @apply text-lg font-display font-medium text-white;

    &.no-icon {
        .button-content .atm-icon {
            @apply hidden;
        }

        .button-triangle {
            @apply block absolute -right-10;
            @apply bg-white bg-opacity-20 rounded-full top-1/2;
            @apply h-10 w-10;
            transform: translateY(-50%) scale(var(--scale));
            transition: transform 500ms ease;
        }
    }

    &.button-icon-only {
        @apply w-12 h-12 px-0 justify-center;
    }

    &.icon-right {
        @apply pr-[0.3rem];
    }

    &.icon-left {
        @apply pl-[0.3rem];
    }

    .button-content-wrapper {
        @apply relative h-12 flex justify-center items-center;
    }

    .button-content {
        @apply flex gap-3 relative z-20;

        .atm-icon {
            @apply relative w-10 flex justify-center items-center;
        }

        .atm-icon::after {
            content: '';
            @apply absolute transform top-1/2 left-1/2;
            @apply w-10 h-10 bg-white bg-opacity-20 rounded-full;
            transform: translate(-50%, -50%) scale(var(--scale));
            transition: transform 500ms ease;
        }
    }

    .button-triangle {
        @apply hidden;
    }
}
  • URL: /components/raw/button-primary/button-primary.css
  • Filesystem Path: src\components\02-atoms\button\button-primary\button-primary.css
  • Size: 1.4 KB
  • Content: 
    (function () {

    'use strict';

    let buttonWidth;
    const standardWidth = 22;

    let scale;

    const primaryButtons = document.querySelectorAll('.atm-button-primary');

    primaryButtons.forEach((primaryButton) => {
        primaryButton.addEventListener('mouseenter', () => {
            buttonWidth = primaryButton.offsetWidth;
            scale = Math.ceil(buttonWidth / standardWidth) * 1.15;

            const triangleButton =
                primaryButton.querySelector('.button-triangle');

            if (triangleButton) {
                triangleButton.style.setProperty('--scale', scale);
            }

            const atmIcon = primaryButton.querySelector('.atm-icon');

            if (atmIcon) {
                atmIcon.style.setProperty('--scale', scale);
            }
        });
        primaryButton.addEventListener('mouseleave', () => {
            scale = 1;

            const triangleButton =
                primaryButton.querySelector('.button-triangle');

            if (triangleButton) {
                triangleButton.style.setProperty('--scale', scale);
            }

            const atmIcon = primaryButton.querySelector('.atm-icon');

            if (atmIcon) {
                atmIcon.style.setProperty('--scale', scale);
            }
        });
    });
})();
  • URL: /components/raw/button-primary/button-primary.js
  • Filesystem Path: src\components\02-atoms\button\button-primary\button-primary.js
  • Size: 1.4 KB

No notes defined.