Custom theme (replace with client name)

CTA Button 

<div class="cta-button cta-button--primary  ">
    <a href="#" class="cta-button__link">
        <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="#3A3A3A" />
            </svg>
        </div>
    </a>
</div>
 
<div class="cta-button cta-button--{{ background }} {% if isHome %}cta-button--home{%endif%} {% if size %}cta-button--{{ size }}{% endif %}">
    <a href="{{ link }}" class="cta-button__link">
        <span class="cta-button__title">{{ linkText }}</span>
        <div class="cta-button__icon">{% include 'bits/icons/' ~ icon ~ '.twig' %}</div>
    </a>
</div>
 
{
  "linkText": "Button Label",
  "link": "#",
  "background": "primary",
  "icon": "arrow-right"
}
  • Content: 
    .cta-button
    &--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
        +above(650px)
            width 350px
    &--small
        width 150px

    background-color var(--backgroundColor)
    color var(--textColor)
    cursor pointer
    display flex
    justify-content center
    padding 8px
    position relative
    text-decoration none
    transition all 0.3s

    +above(650px)
        padding 8px 0

    &: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)

    &__link
        display flex
        font-weight 600
        padding-right 10px
        text-decoration none
        transition all 0.3s

        &::after
            position absolute
            top 0
            right 0
            bottom 0
            left 0
            z-index 5
            content ""
            pointer-events auto

        &:hover
        &:active
        &:focus
            color var(--textColorActive)

    &__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.9 KB

No notes defined.