<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Buttons</h2>
<p>These animations can be used as continous animations or as hover effects. For the purposes of this demo I have set them to be continous animations.</p>
<h3>Transition Effects</h3>
<div class="btns">
<button class="btn fade-in">Fade</button>
<button class="btn grow">Grow</button>
<button class="btn shrink">Shrink</button>
<button class="btn tilt">Tilt</button>
<button class="btn shake">Shake</button>
<button class="btn bounce">Bounce</button>
<button class="btn slide-width">Slide Width</button>
</div>
<h3>Background Effects</h3>
<div class="btns">
<button class="btn fade-bg">Fade</button>
<button class="btn slide left">Slide Left</button>
<button class="btn slide right">Slide Right</button>
<button class="btn slide top">Slide Top</button>
<button class="btn slide bottom">Slide Bottom</button>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
