• button
  • .btn
  • .btn-rev
  • .btn-diff
  • .btn-fake
  • .btn-sm
  • .btn-chop
  • .btn-chop-start
  • .btn-chop-end

Plain button

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

Modify padding by @button-padding-h and @button-padding-v
Modify background color by @btn-diff-bg.
Add .btn-sm to make it smaller
Modify padding by @button-sm-padding


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
    padding: @button-padding-v @button-padding-h;
    display: inline-block;
    transition: background-color .518s;
    line-height: 1;
    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>

Lorem ipsum dolor sit amet

without .btn-chop
chopped with .btn-chop
<div class="card box">
    <div class="tail btn-chop-end">
        <button class="btn-fake">Remove</button>
Without .btn-chop-end
Apply chop .btn-chop-end