<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<button type="button" class="btn btn-primary slideup">Primary</button>
<button type="button" class="btn btn-secondary slidedown">Secondary</button>
<button type="button" class="btn btn-success slideright">Success</button>
<button type="button" class="btn btn-danger slideleft">Danger</button>
<button type="button" class="btn btn-warning slidetopright">Warning</button>
<button type="button" class="btn btn-info slidetopleft">Info</button>
<button type="button" class="btn btn-light slidebottomright">Light</button>
<button type="button" class="btn btn-dark slidebottomleft">Dark</button>
</div>
<div>
<br />
<button type="button" class="btn btn-outline-primary slideup">Primary</button>
<button type="button" class="btn btn-outline-secondary slidedown">Secondary</button>
<button type="button" class="btn btn-outline-success slideright">Success</button>
<button type="button" class="btn btn-outline-danger slideleft">Danger</button>
<button type="button" class="btn btn-outline-warning slidetopright">Warning</button>
<button type="button" class="btn btn-outline-info slidetopleft">Info</button>
<button type="button" class="btn btn-outline-light slidebottomright">Light</button>
<button type="button" class="btn btn-outline-dark slidebottomleft">Dark</button>
</div>
