.btn-grad-pink-400 {background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97  51%, #DD5E89  100%)}
.btn-grad-orange-400  {background-image: linear-gradient(to right, #FF4E50 0%, #F9D423  51%, #FF4E50  100%)}
.btn-grad-orange-600 {background-image: linear-gradient(to right, #c21500 0%, #ffc500  51%, #c21500  100%)}
.btn-grad-green-200 {background-image: linear-gradient(to right, #56ab2f 0%, #a8e063  51%, #56ab2f  100%)}
.btn-grad-green-400 {background-image: linear-gradient(to right, #1D976C 0%, #93F9B9  51%, #1D976C  100%)}
.btn-grad-green-600 {background-image: linear-gradient(to right, #134E5E 0%, #71B280  51%, #134E5E  100%)}
.btn-grad-purple-400 {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%)}
.btn-grad-purple-600 {background-image: linear-gradient(to right, #614385 0%, #516395  51%, #614385  100%)}
.btn-grad {
transition: 0.5s;
background-size: 200% auto;
color: white;            
}

.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}