Button Gradient Roll on Hover

index.jsx

// Implement animation for gradient on hover

const Component = () => {
	return (
  	<div className="container">
      <button>BUTTON</button>
     
  	</div>
  )
}

ReactDOM.render(<Component />, document.querySelector("#app"))

styles.css

.container {
  width: 300px;
}

button {
  margin: 50px;
  width: 300px;
  height: 50px;
  border-radius: 20px;
  border: none;
  outline: none;
  
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  transition: all 0.4s ease-in-out;
}

button:hover {
  background-position: 100% 0;
  transition: all 0.4s ease-in-out;
}