v-button/dist/v-button.css

vButton - AngularJS pressable button with a busy indicator

/**
 * vButton - AngularJS pressable button with a busy indicator
 * @version v1.2.1
 * @link http://lukaszwatroba.github.io/v-button
 * @author Łukasz Wątroba <l@lukaszwatroba.com>
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

/***************************************
  vButton
 ***************************************/
/**
 * Example HTML:
 *
  <button class="Button" ng-click="isBusy = !isBusy" v-busy="isBusy" v-busy-label="Please wait" v-pressable>
    <span>Submit</span>
  </button>
 */
/**
 * Result HTML: if isBusy === true, and button is pressed
 *
  <button class="Button is-busy is-pressed" ng-click="isBusy = !isBusy" v-busy="isBusy" v-busy-label="Please wait" v-pressable>
    <span>Please wait</span>
    <v-ripple></v-ripple>
  </button>
 */
/***************************************
  vBusy
 ***************************************/
[v-busy].is-busy {
  cursor: wait; }
  [v-busy].is-busy::before {
    content: '';
    width: 0.75em;
    height: 0.75em;
    display: inline-block;
    border: solid 2px transparent;
    border-top-color: white;
    border-left-color: white;
    border-radius: 50%;
    margin-right: 0.5em;
    -webkit-animation: v-busy-spin 0.75s linear infinite;
            animation: v-busy-spin 0.75s linear infinite; }

@-webkit-keyframes v-busy-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes v-busy-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

/***************************************
  vPressable
 ***************************************/
[v-pressable] {
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.25s;
          transition: all 0.25s; }
  [v-pressable].is-pressed {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }

/***************************************
  vRipple
 ***************************************/
v-ripple {
  position: absolute;
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100%;
  -webkit-transform: scale(0.2);
          transform: scale(0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-animation: v-ripple-enter 0.5s ease-out;
          animation: v-ripple-enter 0.5s ease-out; }

@-webkit-keyframes v-ripple-enter {
  0% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0; } }

@keyframes v-ripple-enter {
  0% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0; } }