psychic-ui/src/button/button.styl

the working mans css framework

.btn
    padding: 12px 18px
    margin: 10px
    cursor: pointer
    display: inline-block
    text-align: center
    background-color: white
    border: 1px solid $brands['default']
    color: #ffffff
    if $button['box-shadow']
        box-shadow: $button['box-shadow']

    &:hover
        opacity: .95

    &:focus
        outline: none

    &.btn-block
        width: 100%

    for radius in range(0, 100)
        &.border-radius-{radius}
            border-radius: unit(radius, 'px')

    for key, value in $brands
        &.border-{key}
            border: 1px solid value
            color: value

            &:hover
                background-color:lighten(value, 50%)
                opacity: .5
                border-color:darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

            &:active
                background-color: darken(value, 15%)
                opacity: .5
                border-color: darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

        &.btn-{key}
            border: 1px solid darken(value, 15%)
            background-color: value

            &:hover
                background-color:lighten(value, 50%)
                border-color:darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

            &:active
                background-color: darken(value, 15%)
                opacity: .5
                border-color: darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000