colette/src/styl/_elements/_btn.styl

A CSS and JS starter kit for 20 Minutes web projects

// Buttons
//
// Colette comes with basic styles for call to action / buttons.
//
// .btn-line - btn lined
//
// Markup: btn.twig
//
// Styleguide: Elements.Buttons
/:root
    --btn-color: var(--color-bg-tertiary)
    --btn-text-color: var(--color-base)

.btn
    _fontload($fontstack-secondary)
    display inline-block
    text-align center
    padding calc(.5em - 2px) calc(1.5em - 2px)
    border-radius 20em
    font-size .875em
    font-weight bold
    text-transform uppercase
    background-color var(--btn-color)
    border 2px solid var(--btn-color)
    transition filter .2s ease
    color var(--btn-text-color)
    line-height 1.5em
    vertical-align baseline

    &-picto
        width .9em
        height .9em
        margin-bottom -.1em

        &-left
            margin-right .3em

        &-right
            margin-left .3em

    &:disabled
        opacity .5

    &:enabled
    &[href]
        &:hover
            filter brightness(90%) contrast(110%)

    &-line
        --btn-text-color: var(--color-base)

        color var(--btn-text-color)
        background-color transparent
        border-color var(--btn-text-color)