2. Implement gradient animation

by Vitalii_N

HTML

<div id="app"></div>

CSS

.container {
  width: 300px;
}

button {
  cursor: pointer;
  margin: 50px;
  width: 300px;
  height: 50px;
  border-radius: 20px;
  border: none;
  outline: none;
  background: linear-gradient(90deg,#fff000,#000fff 100%);
  background-size: 200% 100%; 
  background-position: 0% 50%; 
  transition: background-position 0.3s ease-in-out;
  
  &:hover {
    background-position: 100% 50%; 
  }
}

React

// Your task is to implement animation for gradient on hover, video of how it should work attached
// You can change any lines of code here and final result may vary from the example, its okay

const Component = () => {
	return (
  	<div className="container">
      <button>CTA BUTTON</button>
      
      <video autoplay="true" src="https://mock-file.s3.amazonaws.com/Screen+Recording+2024-02-17+at+09.10.03.mov"></video>
  	</div>
  )
}

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