Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css - How to make button content highlight animation?

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

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?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...