<div id="app">
  <div>
    <h4>Round</h4>
    <vu-button round>primary</vu-button>
    <vu-button color="secondary" round>secondary</vu-button>
    <vu-button color="info" round>info</vu-button>
    <vu-button color="success" round>success</vu-button>
    <vu-button color="warning" round>warning</vu-button>
    <vu-button color="danger" round>danger</vu-button>
    <vu-button color="light" round>light</vu-button>
    <vu-button color="dark" round>dark</vu-button>
  </div>
  <hr/>
  
  <div>
    <h4>Circle</h4>
    <vu-button circle><vu-icon icon="user"></vu-icon></vu-button>
    <vu-button color="secondary" circle>
      <vu-icon icon="check"></vu-icon>
    </vu-button>
    <vu-button color="info" circle>
      <vu-icon icon="envelope"></vu-icon>
    </vu-button>
    <vu-button color="success" circle>
      <vu-icon icon="home"></vu-icon>
    </vu-button>
    <vu-button color="warning" circle>
      <vu-icon icon="key"></vu-icon>
    </vu-button>
    <vu-button color="danger" circle> 
      <vu-icon icon="paste"></vu-icon>
    </vu-button>
    <vu-button color="light" circle> 
      <vu-icon icon="lock"></vu-icon>
    </vu-button>
    <vu-button color="dark" circle>  
      <vu-icon icon="globe"></vu-icon>
    </vu-button>
  </div>

</div>
#app {
  margin: 1rem;
}
.vu-button {
  margin: .3rem;
}
View Compiled
new Vue({
  el: '#app',
})
View Compiled

External CSS

  1. https://unpkg.com/@gloriajun/gvu/dist/gvu.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js
  2. https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  3. https://unpkg.com/@gloriajun/gvu/dist/gvu.umd.min.js