misuzu/assets/less/classes/input/button.less

.input__button {
    background-image: linear-gradient(0deg, transparent, var(--gradient-start));
    background-color: var(--accent-colour);
    font-family: @mio-font-regular;
    font-size: 1.1em;
    line-height: 1.4em;
    padding: 4px 10px;
    min-width: 80px;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, box-shadow .2s;
    color: var(--text-colour-header);
    border: 1px solid var(--text-colour-header);
    border-radius: 2px;
    display: inline-block;
    text-decoration: none;

    &--disabled {
        background: linear-gradient(0deg, #888, #aaa) !important;
        border-color: #333;
        color: #333;
        box-shadow: initial !important;
    }

    &:focus {
        box-shadow: inset 0 0 2px 0 var(--text-colour-header);
    }

    &:hover {
        background-color: #a586c3;
    }

    &:active {
        background-color: var(--gradient-start);
    }

    &--new {
        color: var(--accent-colour);
        background: #111;
        border: 1px solid var(--accent-colour);
        padding: 5px 10px;
        font-size: 1.2em;
        transition: color .2s, background-color .2s;
        box-shadow: initial !important;

        &:hover,
        &:active,
        &:focus {
            color: #111;
            background-color: var(--accent-colour);
            text-shadow: initial;
        }
    }

    &--destroy {
        --accent-colour: #c00;
    }

    &--save {
        --accent-colour: #080;
    }
}