.ember-hold-button {
  position: relative;
  outline: none;
  border-width: 0;
  font-size: 1em;
  background: transparent;
}

.ember-hold-button span {
  -webkit-transition-duration: inherit;
          transition-duration: inherit;
  -webkit-animation-duration: inherit;
          animation-duration: inherit;
}

/* Circle */

.ember-hold-button.circle {
  border-radius: 50%;
  border: 2px solid #6ba9f3;
  height: 50px;
  width: 50px;
  background: transparent;
  padding: 0;
}

.ember-hold-button.circle span {
  font-size: 0;
  background-color: #6ba9f3;
  border-radius: 50%;
  display: block;
  height: 100%;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2);
  -webkit-transition-property: -webkit-transform;
          transition-property: transform;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  width: 100%;
}

.ember-hold-button.circle.is-holding span {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.ember-hold-button.circle.is-complete span {
  -webkit-transition: none;
          transition: none;
}

/* Rectangle */
.ember-hold-button.rectangle {
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  min-width: 100px;
  text-align: center;
  color: white;
  background: #6ba9f3;
  padding: 0 10px;
}

.ember-hold-button.rectangle span {
  bottom: 0;
  height: 4px;
  left: 0;
  position: absolute;
  -webkit-transition-property: width;
          transition-property: width;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  width: 0;
  background-color: #003b80;
}

.ember-hold-button.rectangle.is-holding span {
  width: 100%
}

.ember-hold-button.rectangle.is-complete span {
  -webkit-transition: none;
          transition: none;
}

/* Border Circle */
.ember-hold-button.border-circle {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background: transparent;
  border: 5px solid red;
}

.ember-hold-button.border-circle span {
  display: none;
}

.ember-hold-button.border-circle.is-holding {
  -webkit-animation-name: border-progress;
          animation-name: border-progress;
  -webkit-animation-duration: inherit;
          animation-duration: inherit;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}

@-webkit-keyframes border-progress {
  25% {
    border-top-color: transparent;
  }
  50% {
    border-top-color: transparent;
    border-right-color: transparent;
  }
  75% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  100% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

@keyframes border-progress {
  25% {
    border-top-color: transparent;
  }
  50% {
    border-top-color: transparent;
    border-right-color: transparent;
  }
  75% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  100% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}
