Getting Started with Less

Build Bootstrap Style Button Mixins

Button Mixins

Let's build some button Mixins for you to use!

Here's the code sample from the demo:

.btn-font-style {
    .base-font;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.15em;
    line-height: 1;
    outline: none;
    text-decoration: none !important;

    @media @desktop-down {
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    @media @tablet-down {
        font-size: 10px;
        letter-spacing: 0.08em;
    }
}

.btn-base {

    // Text Styles
    .btn-font-style;

    // Shape and Size
    position: relative;
    text-align: center;
    display: inline-block;
    padding: 0;
    border-radius: 4px;
    border: none;
    .nice-shadow;

    // Default Color Set
    background: @body-background;


    .default-transition;

    // Sizing
    &.fill-out {
        height: auto;
        padding: 20px 50px;

        @media @desktop-down { padding: 20px 45px; }
        @media @tablet-down { padding: 18px 35px; }
    }

    &.fill-long {
        padding: 20px 70px;

        @media @wide-screen-down { padding: 20px 60px; }
        @media @desktop-down { padding: 18px 45px; }
    }


    &.fill-long-fixed {
        max-width: 100%;
        min-width: 300px;
        padding: 20px 15px;

        @media @desktop-down { padding: 18px 15px; }
        @media @tablet-down {
            min-width: 0;
        }
    }
}


.btn-solid(@background, @color) {
    background: @background;
    color: @color;

    &:hover,
    &:focus {
        background: lighten(@background, 10%);
        color: @color;
    }

    &:active {
        background: lighten(@background, 20%);
        color: @color;
    }
}




// Button Colors
.btn-awesome { .btn-solid(@awesome, #fff); }
.btn-dankness { .btn-solid(@dankness, #fff); }
.btn-righteous { .btn-solid(@righteous, #fff); }