Buttons - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/buttons

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="app">
  <div class="row">
    <template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
      <div class="col-md-4 pb-2" v-for="size in ['sm','','lg']">
        <b-button :size="size" :variant="variant" href="" class="test">
          {{variant}} {{size}}
        </b-button>
      </div>
    </template>
  </div>
</div>

CSS

#app {
  padding: 20px;
  height: 450px;
}
.test:focus {
  outline: none;
}

JavaScript

new Vue({
  el: '#app'
})