Getting Started with Less: Lesson 26 of 28

Build Bootstrap Style Button Mixins

Up Next

Bootsrap 3 Integration with Less

Autoplaying in 7 seconds!

Cancel

Table of Contents

    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); }