colette/src/styl/_elements/_btnIcon.styl

A CSS and JS starter kit for 20 Minutes web projects

// Icon Buttons
//
// Icon buttons are icons in a colored circle.
//
// Markup: btnIcon.twig
//
// Weight: 2
//
// Styleguide: Elements.IconButtons
.btnIcon
    --btn-color: var(--color-bg-tertiary)
    --btn-text-color: var(--color-base)

    display inline-block
    vertical-align middle
    border-radius 60em // oversize radius to keep it round
    background-color var(--btn-color)
    color var(--btn-text-color)
    transition filter .2s ease

    svg
        width 1em
        height 1em
        margin .33em
        display block

    &:disabled
        opacity .5

    &:enabled:hover
        background-color brightness(90%) contrast(110%)