.btn {
  border-radius: 5px;
  border: 3px solid transparent;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition: background-color .3s ease 0s, border-color .3s ease 0s, color .3s ease 0s;
}

.btn-primary {
  background-color: #02c39a;
  color: #fff;
  border-color: #02c39a;
}
.btn-center {
  display: flex;
  justify-content: center;

}
.btn-primary:hover {
  background-color: #02A27F;
  border-color: #02A27F;
}
.btn-primary.btn-border:hover {
  color: #02c39a
}
.btn-primary.btn-border-inverse {
  background-color: #fff;
  color: #02c39a;
  border-color: #02c39a;
}
.btn-primary.btn-border-inverse:hover {
  background-color: #02c39a;
  color: #fff;
}
.btn-primary.btn-3d {
  box-shadow: 0px 4px #ff3a1c;
  position: relative;
}
.btn-primary.btn-3d:hover {
  background-color: #02c39a;
  color: #fff;
  border-color: #02c39a;
  top: 2px;
  box-shadow: 0px 2px #ff3a1c;
}
.btn-primary.btn-3d.btn-3d.btn-border-inverse:hover {
  background-color: #fff;
  color: #02c39a;
}
.btn-primary.btn-3d:active {
  top: 4px;
  box-shadow: 0px 0px #ff3a1c;
}

.btn-warning {
  background-color: #ff6f59;
  color: #fff;
  border-color: #ff6f59;
}
.btn-warning:hover {
  background-color: #ff8a78;
  border-color: #ff8a78;
}
.btn-warning.btn-border:hover {
  color: #ff6f59;
}
.btn-warning.btn-border-inverse {
  background-color: #fff;
  color: #ff6f59;
  border-color: #ff6f59;
}
.btn-warning.btn-border-inverse:hover {
  background-color: #ff6f59;
  color: #fff;
}
.btn-warning.btn-3d {
  box-shadow: 0px 4px #c2a708;
  position: relative;
}
.btn-warning.btn-3d:hover {
  background-color: #ff6f59;
  color: #fff;
  border-color: #ff6f59;
  top: 2px;
  box-shadow: 0px 2px #c2a708;
}
.btn-warning.btn-3d.btn-3d.btn-border-inverse:hover {
  background-color: #fff;
  color: #ff6f59;
}
.btn-warning.btn-3d:active {
  top: 4px;
  box-shadow: 0px 0px #c2a708;
}

.btn-danger {
  background-color: #C9302C;
  color: #fff;
  border-color: #C9302C;
}
.btn-danger:hover {
  background-color: #d6413e;
  border-color: #d6413e;
}
.btn-danger.btn-border:hover {
  color: #C9302C;
}
.btn-danger.btn-border-inverse {
  background-color: #fff;
  color: #C9302C;
  border-color: #C9302C;
}
.btn-danger.btn-border-inverse:hover {
  background-color: #C9302C;
  color: #fff;
}
.btn-danger.btn-3d {
  box-shadow: 0px 4px #982320;
  position: relative;
}
.btn-danger.btn-3d:hover {
  background-color: #C9302C;
  color: #fff;
  border-color: #C9302C;
  top: 2px;
  box-shadow: 0px 2px #982320;
}
.btn-danger.btn-3d.btn-3d.btn-border-inverse:hover {
  background-color: #fff;
  color: #C9302C;
}
.btn-danger.btn-3d:active {
  top: 4px;
  box-shadow: 0px 0px #982320;
}

.btn-success {
  background-color: #449d44;
  color: #fff;
  border-color: #449d44;
}
.btn-success:hover {
  background-color: #4cb34c;
  border-color: #4cb34c;
}
.btn-success.btn-border:hover {
  color: #449d44;
}
.btn-success.btn-border-inverse {
  background-color: #fff;
  color: #449d44;
  border-color: #449d44;
}
.btn-success.btn-border-inverse:hover {
  background-color: #449d44;
  color: #fff;
}
.btn-success.btn-3d {
  box-shadow: 0px 4px #317331;
  position: relative;
}
.btn-success.btn-3d:hover {
  background-color: #449d44;
  color: #fff;
  border-color: #449d44;
  top: 2px;
  box-shadow: 0px 2px #317331;
}
.btn-success.btn-3d.btn-3d.btn-border-inverse:hover {
  background-color: #fff;
  color: #449d44;
}
.btn-success.btn-3d:active {
  top: 4px;
  box-shadow: 0px 0px #317331;
}

.btn-info {
  background-color: #31b0d5;
  color: #fff;
  border-color: #31b0d5;
}
.btn-info:hover {
  background-color: #49badb;
  border-color: #49badb;
}
.btn-info.btn-border:hover {
  color: #31b0d5;
}
.btn-info.btn-border-inverse {
  background-color: #fff;
  color: #31b0d5;
  border-color: #31b0d5;
}
.btn-info.btn-border-inverse:hover {
  background-color: #31b0d5;
  color: #fff;
}
.btn-info.btn-3d {
  box-shadow: 0px 4px #2189a8;
  position: relative;
}
.btn-info.btn-3d:hover {
  background-color: #31b0d5;
  color: #fff;
  border-color: #31b0d5;
  top: 2px;
  box-shadow: 0px 2px #2189a8;
}
.btn-info.btn-3d.btn-3d.btn-border-inverse:hover {
  background-color: #fff;
  color: #31b0d5;
}
.btn-info.btn-3d:active {
  top: 4px;
  box-shadow: 0px 0px #2189a8;
}

.btn-disabled {
  background-color: #bdc3c7;
  color: #fff;
  cursor: default;
}

.btn-border:hover {
  background-color: #fff;
}

.btn-lg {
  padding: 10px 12px;
}

.btn-sm {
  padding: 8px 10px;
  font-size: 14px;
  font-size: 0.875rem;
}

.btn-round {
  border-radius: 40px;
}

.btn-flat {
  border-radius: 0;
}

/* ripple effect */
.btn-ripple__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.btn-ripple__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.btn-ripple__container.is-active .btn-ripple__circle {
  -webkit-animation: ripples .4s ease-in;
          animation: ripples .4s ease-in;
}

@-webkit-keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}

@keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
/* shikoba effect */
.btn-shikoba {
  overflow: hidden;
  padding-left: 2em;
}
.btn-shikoba > i {
  position: absolute;
  left: 20px;
  font-size: 18px;
  transform: translate3d(-40px, 2.5em, 0);
  transition: transform 0.3s;
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.lt-ie10 .btn-shikoba > i {
  -ms-transform: translate(-40px);
}
.btn-shikoba > span {
  display: inline-block;
  transform: translate3d(-10px, 0, 0);
  transition: transform 0.3s;
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.lt-ie10 .btn-shikoba > span {
  -ms-transform: translate(-10px);
}
.btn-shikoba:hover > i {
  transform: translate3d(-12px, 0, 0);
}
.lt-ie10 .btn-shikoba:hover > i {
  -ms-transform: translate(-12px);
}
.btn-shikoba:hover > span {
  transform: translate3d(2px, 0, 0);
}
.lt-ie10 .btn-shikoba:hover > span {
  -ms-transform: translate(2px);
}