Simple example of how to reskin the default Bootstrap buttons using LESS
A Pen by Matt Lambert on CodePen.
<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> |
@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; | |
} | |