css - How to make button content highlight animation?

Question

I want to make animation to my button, which look like this ->

I want to change color of all arrows in sequence from left to right (delay in highlighting the arrows can be around 50ms) from white color to accent (border color).

<button className="submit-button" onClick={showButtonAnimation}>
  <span className={'span-button'}>{'>'}</span>
  <span className={'span-button'}>{'>'}</span>
  <span className={'span-button'}>{'>'}</span>
  <span className={'span-button'}>{'>'}</span>
  <span className={'span-button'}>{'>'}</span>
</button>

This is my button element...

Do you have any ideas how showButtonAnimation can look like?

Answer 1

const[startAnim, setStartAnim] = useState(false);

<button className={startAnim ? "submit-button animate" : "submit-button"} onClick={() => setStartAnim(true)}>
  <span className={'span-button span1'}>{'>'}</span>
  <span className={'span-button span2'}>{'>'}</span>
  <span className={'span-button span3'}>{'>'}</span>
</button>

Then the CSS you can maybe have an idea here: https://codepen.io/TotallyCurious/pen/RJOawN