<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<button class="a1"><span>I'm a button</span></button><span class="desc">A1 - Transparent background color</span>
</div>
<div>
<button class="a2"><span>I'm a button</span></button><span class="desc">A2 - Show background color</span>
</div>
<div>
<button class="b1"><span>I'm a button</span></button><span class="desc">B1 - Show text</span>
</div>
<div>
<button class="b2"><span>I'm a button</span></button><span class="desc">B2 - Show button</span>
</div>
<div>
<button class="b3"><span>I'm a button</span></button><span class="desc">B3 - Show border</span>
</div>
<div>
<button class="c1"><span>I'm a button</span></button><span class="desc">C1 - Radial out background color</span>
</div>
<div>
<button class="c2"><span>I'm a button</span></button><span class="desc">C2 - Radial in background color</span>
</div>
<div>
<button class="d1"><span>I'm a button</span></button><span class="desc">D1 - Vertical slide out background color</span>
</div>
<div>
<button class="d2"><span>I'm a button</span></button><span class="desc">D2 - Vertical slide in background color</span>
</div>
<div>
<button class="e1"><span>I'm a button</span></button><span class="desc">E1 - Horizontal slide out background color</span>
</div>
