.button1 {background-image: linear-gradient(to right, #314755 0%, #4777d1  51%, #314755  100%)}
.button1 {
  margin: 10px;
  padding: 15px 45px;
  text-transform: none;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  border-radius: 10px;
  display: block;
}

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