AFW Pattern Lab

Button: Success 

<a class="a-btn a-btn--success">

    Elit et Exercitation

</a>
 
{% switch _self.name %}
{% case 'bars' %}
<{{tag}} class="a-btn{{class|lspace}}{{modifierClasses|lspace}}" aria-label="{{text}}">
    <span class="a-btn__bar"></span>
    <span class="a-btn__bar"></span>
    <span class="a-btn__bar"></span>
</{{tag}}>
{% default %}
<{{tag}} class="a-btn{% if style %} a-btn--{{style}}{% endif %}{% if active %} is-active{% endif %}{{class|lspace}}"{% if href %} href="{{href}}"{% endif %}>
{% if iconLeft %}
<i class="icon fal fa-fw fa-{{iconLeft}}" aria-hidden="true"></i>
{% endif %}
{{text|safe}}
{% if iconRight %}
<i class="icon fal fa-fw fa-{{iconRight}}" aria-hidden="true"></i>
{% endif %}
</{{tag}}>
{% endswitch %}
 
{
  "tag": "a",
  "text": "Elit et Exercitation",
  "style": "success",
  "iconLeft": null,
  "iconRight": null
}
  • Content: 
    .a-btn {
    $this: &;

    $a-btn-padding: rem(12px) rem(16px);
    
    align-items: center;
    border: none;
    border-radius: rem(8px);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
    line-height: 1;

    &--default,
    &--primary,
    &--secondary,
    &--warning,
    &--success,
    &--danger {
        color: $color-white;
        padding: $a-btn-padding;
        text-decoration: none;
    }

    &--default {
        background: $color-primary-text;
    }

    &--primary {
        background: $color-primary-blue;
    }

    
    &--secondary {
        background: $color-primary-red;
    }
    
    &--warning {
        background: $color-orange;
    }
    
    &--success {
        background: $color-green;
    }

    &--danger {
        background: $color-red-dark;
    }

    @each $color, $var in $colors {
        &--#{$color} {
            color: $color-white;
            background: $var;
            padding: $a-btn-padding;
            text-decoration: none;
        }
    }

    &--white {
      color: $color-primary-text;
    }

    &--block {
        display: flex;
        width: 100%;
    }

    &:visited,
    &:active {
        color: $color-white !important;
    }

    &--faq {
        background: $color-gray-lighter;
        border-inline: rem(1px) solid $color-gray-light;
        border-radius: 0;
        color: $color-gray-darker;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: rem(12px);
        padding: rem(30px) rem(8px);
        position: relative;
        white-space: nowrap;

        @include media-lg-up {
            font-size: rem(16px);
        }

        &:visited,
        &:active {
            color: $color-gray-darker !important;
        }

        &:hover,
        &:focus {
            color: $color-primary-blue !important;
            cursor: pointer;
        }

        .icon {
            font-size: rem(22px);
            margin-bottom: rem(4px);
            
            
            @include media-lg-up {
                font-size: rem(40px);
                margin-bottom: rem(8px);
            }
        }

        &.is-active {
            background: $color-primary-blue;
            border-color: $color-primary-blue;
            border-radius: rem(4px);
            color: $color-white;
            pointer-events: none;

            &::after {
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -10px;
                width: 0;
                height: 0;
                border: solid transparent;
                border-width: 10px;
                border-top-color: $color-primary-blue;
                content: '';
                pointer-events: none;
            }
        }
    }
    
    &--lg {
        padding: rem(15px) rem(20px);
        font-size: rem(20px);
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: source/patterns/atoms/button/button.scss
  • Size: 3 KB

This Is a Button Readme