E3 Alliance Pattern Library

CTA Button: Small 

<a href="#" class="cta-button cta-button--primary  cta-button--small">
        <span class="cta-button__title">
            Button Label
        </span>
        <div class="cta-button__icon">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="_mark" d="M10.4791 7.83331H0.333252V6.16665H10.4791L5.81242 1.49998L6.99992 0.333313L13.6666 6.99998L6.99992 13.6666L5.81242 12.5L10.4791 7.83331Z" fill="#88C965" />
            </svg>
        </div>
    </a>
 
<a
        href="{{ link }}"
        class="cta-button cta-button--{{ background }} {% if isHome %}cta-button--home{%endif%} {% if size %}cta-button--{{ size }}{% endif %}"
    >
            <span class="cta-button__title">
            {{ linkText }}
        </span>
        <div class="cta-button__icon">
            {% include 'bits/icons/' ~ icon ~ '.twig' %}
        </div>
    </a>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "linkText": "Button Label",
  "link": "#",
  "background": "primary",
  "icon": "arrow-right",
  "size": "small"
}
  • Content: 
    .cta-button
    &
    &--light
        --backgroundColor white
        --backgroundColorHover white
        --backgroundColorActive lightGrey
        --textColor sapphire
        --textColorActive jet
        --buttonShadowColorHover rgba(0, 0, 0, 0.5)
        --buttonShadowColorActive rgba(0, 0, 0, 0)
    &--dark
        --backgroundColor sapphire
        --backgroundColorHover sapphire
        --backgroundColorActive darkSapphire
        --textColor white
        --textColorActive greenApple
        --buttonShadowColorHover rgba(0, 0, 0, 0.25)
        --buttonShadowColorActive rgba(0, 0, 0, 0.25)

    &--light
        --backgroundColor white
        --backgroundColorHover white
        --backgroundColorActive lightGrey
        --textColor sapphire
        --textColorActive jet
        --buttonShadowColorHover rgba(0, 0, 0, 0.5)
        --buttonShadowColorActive rgba(0, 0, 0, 0)
    &--home
    &--small
        display inline-flex

    background-color var(--backgroundColor)
    color var(--textColor)
    display flex
    font-weight 600
    justify-content center
    padding 8px 12px
    padding-right 18px
    text-decoration none
    transition all 0.3s

    &:hover
    &:active
    &:focus
        color var(--textColorActive)
        background-color var(--backgroundColorHover)
    &:hover
    &:focus
        box-shadow 0 4px 16px var(--buttonShadowColorHover)
    &:active
        box-shadow none
        background-color var(--backgroundColorActive)
        box-shadow 0 4px 16px var(--buttonShadowColorActive)


    &__title
        text-align center

    &__icon
        padding-left 8px
        align-self center


    &__file-size
        font-weight normal
  • URL: /components/raw/cta-button/cta-button.styl
  • Filesystem Path: patterns/bits/cta-button/cta-button.styl
  • Size: 1.7 KB

No notes defined.