Bootstrap 3 + LESS/CSS

by tecs717

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div class="container">
    <button class="working">
      Click Me
    </button>
</div>

CSS

button {
  height: 50px;
  padding: 0 40px;
  line-height: 50px;
  background-color: #14c5bd;
  color: white;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  border-radius: 0;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  position: relative;
}
button.working {
  transition: background ease 0.2s;
  color: #14c5bd;
}
button.working::after {
  content: ' ';
  width: 50px;
  height: 50px;
  position: absolute;
  margin-left: -25px;
  left: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image:...

JavaScript

// hack in less support...
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();