Button

Plain button

Buttons are redefined and normalized to appear and behave as follows. The classnames mentioned below are not bound to button tag.

The button template

The template used to define buttons is a LESS function .btntemplate(). Extend or overwrite this template by adding new definitons to the LESS function.

// The button template function in the framework
.btntemplate(){
    padding: @button-padding-v @button-padding-h;
    display: inline-block;
    transition: background-color .518s;
    line-height: 1;
    .border-radius(@radius);
    text-transform: uppercase;
    font-size: 90%;
    cursor: pointer;
    border: 0;
}


// project LESS example
.btntemplate() {
	text-transform: none;
}

Bonus: fake button chop

When placing fake buttons inside a box, the paddings add up and it might look out of alignment. Use .btn-chop on wrapper to remove extra paddings.

.btn-chop and .btn-chop-start

<div class="box">
    <div class="btn-chop-start">
        <button class="btn-fake">Accept</button>
    </div>
</div>

.btn-chop-end

<div class="card box">
    <div class="tail btn-chop-end">
        <button class="btn-fake">Remove</button>
    </div>
</div>