// copy paste react return ( <> <style> {` .animated-text { position: relative; display: inline-block; text-decoration: none;} .animated-text::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: white; transform-origin: 0% 50%; transform: scaleX(0); transition: transform 0.3s ease;} .wrapper:hover .animated-text::after, .wrapper:hover .animated-text { transform: scaleX(1);} //or (removing redundant, see if it works) .wrapper:hover .animated-text1::after{ transform: scaleX(1);} `} <style> <button className="wrapper"> <p className="animated-text">click</p> </button> </> )
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter