James702 Posted October 29, 2020 Share Posted October 29, 2020 Hey everyone! Who knows how to create a CTA button like on this website https://ester.co/ I want it to be like two-colored, while pointing. Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted October 29, 2020 Solution Share Posted October 29, 2020 Hey James and welcome to the GreenSock forums. If you inspect the CTA button you can see that they are using two extra elements (in their case pseudo-elements) to create the colored rectangle behind the text. I'm not sure why they need two elements as I'd use a single element. All you need to do is position an element to the left of the text (with overflow: hidden; on the parent) then when it's hovered translate it in the x direction to the "normal" location behind the text. Then when the button is unhovered you translate it to the right. If someone hovers over it again before the animation completes then you restart the animation from the beginning (killing off the old animation). 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now