button, .paper-btn, [type="button"] {
    .shadow;
    align-self:center;
    background:transparent;
    transition:all .5s ease, background-color .1s ease;
    color: @primary;
    display: inline;
    outline:none;
    border:solid 2px @primary;
    .border;
    font-size: 1rem;
    padding: .75rem .75rem;
    cursor: pointer;
    &.btn-large {
        .shadow-large;
        font-size:2rem;
        padding:1rem 1rem;
    }
    &.btn-small {
        .shadow-small;
        font-size: .75rem;
        padding: .5rem;
    }
    &.btn-block {
        display: block;
        width: 100%;
    }
    &:hover{
        .shadow-hover;
    }
    &.disabled, &[disabled]{
        .disabled;
    }
}

a {
    text-decoration: none;
    background-image:
        linear-gradient(5deg, transparent 65%, @secondary 80%, transparent 90%),
        linear-gradient(165deg, transparent 5%, @secondary 15%, transparent 25%),
        linear-gradient(165deg, transparent 45%, @secondary 55%, transparent 65%),
        linear-gradient(15deg, transparent 25%, @secondary 35%, transparent 50%);
    background-repeat:repeat-x;
    background-size: 4px 3px;
    background-position:0 90%;
    &:visited {
        text-decoration: none;
        color: @primary;
    }
}

.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
    .make-button-color-classes(@i - 1);
    @color: extract(@colors, @i);
    button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} {
        border-color: @@color;
        background-color: ~"@{@{color}-light}";
        color: ~"@{@{color}-text}";
        &:hover:active{
            @darkcolour: ~"@{color}-light";
            background-color: darken(@@darkcolour, 10%);
        }
    }
}

.make-button-color-classes();