SiPhox Health - Implement gradient animation

by Victor

HTML

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

CSS

.container {
  width: 300px;
}

button {
  margin: 50px;
  width: 300px;
  height: 50px;
  border-radius: 20px;
  border: none;
  outline: none;
  background: linear-gradient(90deg, #000fff, #fff000, #000fff);
  background-size: 200% 100%;
  background-position: 100% 50%;
}

button:hover {
  animation: animateButton 1s ease-in-out infinite;
}

@keyframes animateButton {
  0% {
    background-position: 100% 50%;
  }

  50% {
    background-position: 0% 50%;
  }

  100% {
    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"))