A Pen by Matt Lambert.

index.html

<div class="row">
  <div class="col-lg-12">
    <button class="btn btn-default">default</button>
    <button class="btn btn-primary">primary</button>
    <button class="btn btn-info">info</button>
    <button class="btn btn-success">success</button>
    <button class="btn btn-warning">warning</button>
    <button class="btn btn-danger">danger</button>
  </div>
</div>

Re-skinned-Bootstrap-buttons-with-LES.markdown

Re-skinned Bootstrap buttons with LESS

Simple example of how to reskin the default Bootstrap buttons using LESS

A Pen by Matt Lambert on CodePen.

License.

style.less

@off-white: #ecf0f1;
@light-grey: #bdc3c7;
@blue: #3498db;
@blue2: #2980b9;
@purple: #9b59b6;
@purple2: #8e44ad;
@green: #2ecc71;
@green2: #27ae60;
@yellow: #f1c40f;
@yellow2: #f39c12;
@red: #e74c3c;
@red2: #c0392b;
@dark-blue: #2c3e50;
@white: #fff;

@padding: 1em;
@margin: 1em;

.round-corners (@radius: 20px) {
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}

.transition (@transition: background .3s linear) {
  -moz-transition: @transition;
  -webkit-transition: @transition;
  transition: @transition;
}

.btn {
  text-transform: uppercase;
  padding: (@padding - 0.5) @padding;
  font-weight: bold;
  
  .round-corners;
  .transition;
}

.btn:hover {
  .transition;
}

.btn-default {
  color: @dark-blue;
  border-color: @light-grey;
}

.btn-default:hover {
  background-color: @light-grey;
  border-color: @light-grey;
}

.btn-primary {
  background-color: @blue;
  border-color: @blue;
}

.btn-primary:hover {
  background-color: @blue2;
  border-color: @blue2;
}

.btn-info {
  background-color: @purple;
  border-color: @purple;
}

.btn-info:hover {
  background-color: @purple2;
  border-color: @purple2;
}

.btn-success {
  background-color: @green;
  border-color: @green;
}

.btn-success:hover {
  background-color: @green2;
  border-color: @green2;
}

.btn-warning {
  background-color: @yellow;
  border-color: @yellow;
}

.btn-warning:hover {
  background-color: @yellow2;
  border-color: @yellow2;
}

.btn-danger {
  background-color: @red;
  border-color: @red;
}

.btn-danger:hover {
  background-color: @red2;
  border-color: @red;
}