Vue-awesome-buttons NPM

vue-awesome-buttons

Awesome Vue.js button components inspired by this reddit post

Install

npm install vue-awesome-buttons

Import

Import plugin:

import VueAwesomeButtons from 'vue-awesome-buttons'

Vue.use(VueAwesomeButtons)

OR

import ButtonCreate from 'vue-awesome-buttons/src/components/ButtonCreate'
import ButtonSubscribe from 'vue-awesome-buttons/src/components/ButtonSubscribe'
import ButtonUpgrade from 'vue-awesome-buttons/src/components/ButtonUpgrade'
import ButtonGetStarted from 'vue-awesome-buttons/src/components/ButtonGetStarted'
import ButtonLearnMore from 'vue-awesome-buttons/src/components/ButtonLearnMore'

Declaration

<button-upgrade class="button-upgrade" :label="UPGRADE" @click="onClickEventHandler" />
<button-lear-more class="button-learn-more" :label="LEARN MORE" @click="onClickEventHandler" />
<button-get-started class="button-get-started" :label="GET STARTED" @click="onClickEventHandler" />
<button-subscribe class="button-subscribe" :label="SUBSCRIBE" @click="onClickEventHandler" />
<button-create class="button-create" :label="CREATE" @click="onClickEventHandler" />

Styling

Buttons are shipped with browser defaults, override style through CSS:

.button-upgrade {
  background-color: #ffc04c;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  color: #414141;
}

.button-learn-more {
  background-color: #f2fafe;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  color: #414141;
}

.button-get-started {
  background-color: #2146ec;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
}

.button-subscribe {
  background-color: #da6056;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
}

.button-create {
  background-color: #9f51f3;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
}