E3 Alliance Pattern Library

CTA Button: Icon External 

<a href="#" class="cta-button cta-button--light  ">
        <span class="cta-button__title">
            Button Label
        </span>
        <div class="cta-button__icon">
            <svg class="external-link" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="_mark external-link__shape" d="M12.75 10.75C13.3145 10.75 13.8125 11.248 13.8125 11.8125V15C13.8125 16.1953 12.8496 17.125 11.6875 17.125H2.125C0.929688 17.125 0 16.1953 0 15V5.4375C0 4.27539 0.929688 3.3125 2.125 3.3125H5.3125C5.87695 3.3125 6.375 3.81055 6.375 4.375C6.375 4.97266 5.87695 5.4375 5.3125 5.4375H2.125V15H11.6875V11.8125C11.6875 11.248 12.1523 10.75 12.75 10.75ZM16.668 0.457031C16.8672 0.65625 17 0.921875 17 1.1875V6.5C17 7.09766 16.4355 7.5625 15.9043 7.5625C15.3398 7.5625 14.875 7.09766 14.875 6.5V3.77734L7.4375 11.2812C7.00586 11.7129 6.3418 11.7129 5.91016 11.2812C5.51172 10.8828 5.51172 10.2188 5.91016 9.78711L13.3809 2.2168H10.625C10.0605 2.2168 9.5625 1.75195 9.5625 1.1875C9.5625 0.623047 10.0273 0.125 10.625 0.125H15.9375C16.2031 0.125 16.4688 0.257812 16.668 0.457031Z" 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": "light",
  "icon": "external-link"
}
  • 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.