WordPress Colorized Button

wordpress-colorized-button.less

.button-colorized(@baseColor) {
    background: @baseColor;
    border-color: darken(@baseColor, 5%) darken(@baseColor, 9%) darken(@baseColor, 9%);
    -webkit-box-shadow: 0 1px 0 darken(@baseColor, 9%);
    box-shadow: 0 1px 0 darken(@baseColor, 9%);
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 1px darken(@baseColor, 9%), 1px 0 1px darken(@baseColor, 9%), 0 1px 1px darken(@baseColor, 9%), -1px 0 1px darken(@baseColor, 9%);

    &.hover,
    &:hover,
    &.focus,
    &:focus {
        background: lighten(@baseColor, 2%);
        border-color: darken(@baseColor, 9%);
        color: #fff;
    }

    &.focus,
    &:focus {
        -webkit-box-shadow: 0 1px 0 darken(@baseColor, 5%), 0 0 2px 1px darken(@baseColor, 17%);
        box-shadow: 0 1px 0 darken(@baseColor, 5%), 0 0 2px 1px darken(@baseColor, 17%);
    }


    &.active,
    &.active:hover,
    &.active:focus,
    &:active {
        background: darken(@baseColor, 5%);
        border-color: darken(@baseColor, 9%);
        -webkit-box-shadow: inset 0 2px 0 darken(@baseColor, 9%);
        box-shadow: inset 0 2px 0 darken(@baseColor, 9%);
        vertical-align: top;
    }

    &[disabled],
    &:disabled,
    &-disabled,
    &.disabled {
        color: lighten(@baseColor, 27%) !important;
        background: lighten(@baseColor, 2%) !important;
        border-color: lighten(@baseColor, 3%) !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
        cursor: default;
    }
}

// example
.button {

    &.button-success {
        .button-colorized(#46b450); // #46b450 found in .notice-success (common.css)
    }

    &.button-error {
        .button-colorized(#d54e21); // #d54e21 found in #adminmenu .update-plugins (admin-menu.css)
    }
}