.gradient-button {
  margin: 10px 0px 10px 0px;
  font-size: 20px;
  padding: 15px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: #FFF;
  box-shadow: 0 0 4px #eee;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
  display: inline-block;
  border-radius: 25px;
  border-color: transparent;
}

.gradient-button:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin: 8px 0px 12px 0px;
  border-color: transparent;
  color: white;
}

.gradient-button-3 {
  background-image: linear-gradient(to right, #2dacc7 0%, #348AC7 51%, #2dacc7 100%);
}

.gradient-button-3:hover {
  background-position: right center;
}