examples/vue/include/button.vue

<!-- Inspired by bootstrap http://getbootstrap.com/ -->
<template>
  <div :class="['btn', 'btn-' + type, 'btn-sz-' + size]">
    <text :class="['btn-txt', 'btn-txt-' + type, 'btn-txt-sz-' + size]">{{value}}</text>
  </div>
</template>

<script>
  module.exports = {
    props: {
      type: { default: 'default' },
      size: { default: 'large' },
      value: { default: '' }
    }
  }
</script>

<style scoped>
  .btn {
    margin-bottom: 0;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-style: solid;
    border-color: #333;

    /*white-space: nowrap;*/
    /*vertical-align: middle;*/
    /*touch-action: manipulation;*/
    /*cursor: pointer;*/
    /*-webkit-user-select: none;*/
    /*background-image: none;*/
    /*border-image-source: initial;*/
    /*border-image-slice: initial;*/
    /*border-image-width: initial;*/
    /*border-image-outset: initial;*/
    /*border-image-repeat: initial;*/
  }

  .btn-txt {

  }

  /**TYPE**/

  .btn-default {
    color: rgb(51, 51, 51);
  }

  .btn-primary {
    background-color: rgb(40, 96, 144);
    border-color: rgb(40, 96, 144);
  }

  .btn-success {
    background-color: rgb(92, 184, 92);
    border-color: rgb(76, 174, 76);
  }

  .btn-info {
    background-color: rgb(91, 192, 222);
    border-color: rgb(70, 184, 218);
  }

  .btn-warning {
    background-color: rgb(240, 173, 78);
    border-color: rgb(238, 162, 54);
  }

  .btn-danger {
    background-color: rgb(217, 83, 79);
    border-color: rgb(212, 63, 58);
  }

  .btn-link {
    border-color: transparent;
    border-radius: 0;
  }

  .btn-txt-default {
    color: rgb(51, 51, 51);
  }

  .btn-txt-primary {
    color: rgb(255, 255, 255);
  }

  .btn-txt-success {
    color: rgb(255, 255, 255);
  }

  .btn-txt-info {
    color: rgb(255, 255, 255);
  }

  .btn-txt-warning {
    color: rgb(255, 255, 255);
  }

  .btn-txt-danger {
    color: rgb(255, 255, 255);
  }

  .btn-txt-link {
    color: rgb(51, 122, 183);
    /*font-weight: 400;*/
  }

  /**SIZE**/

  .btn-sz-large {
    width: 300px;
    height: 100px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 40px;
    padding-right: 40px;
    /*line-height: 1.33333;*/
    border-radius: 15px;
  }

  .btn-sz-middle {
    width: 240px;
    height: 80px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
    /*line-height: 1.42857;*/
    border-radius: 10px;
  }

  .btn-sz-small {
    width: 170px;
    height: 60px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 25px;
    padding-right: 25px;
    /*line-height: 1.5;*/
    border-radius: 7px;
  }

  .btn-txt-sz-large {
    font-size: 45px;
  }

  .btn-txt-sz-middle {
    font-size: 35px;
  }

  .btn-txt-sz-small {
    font-size: 30px;
  }

  /*DISABLED*/

  .disabled {

  }

</style>