'Read More' button text to change to 'Close' after transition

Hi,

I’ve created a ‘read more’ link that uses an interaction to reveal more content on click.

How would I change the button text to read ‘close’ after the transition has finished?

You can see the work in progress here (the button is about half way down this page, called ‘read more’): http://primal-academy.webflow.com/development

I’ve playing around with hiding and showing another button but the results have been poor!

Any advice?

Thanks

But I think that’s what you should do anyway. Try to start stacking two buttons. Make the “close” one under the “more” one. Then try passing the More one display:none at the end of the first interaction. And so on.

2 Likes

also, you should change your “READ MORE” element to a link block. When I hover over it, I don’t get the “pointer” cursor.

@vincent Makes sense, I’ll persevere with the hiding and showing, thanks for the advice

@PixelGeek very good point! cheers for the feedback, I’ll incorporate…

Hey Matt, do you have a public link to your webflow design page? I’m trying to do something similar to your example so it’d be good to see your interaction settings and how you created the button transition.

Thanks!

Hi,

No problem: https://webflow.com/design/primal-academy?preview=77e5d15def9bd66d4a97b7890457231d

Go to the ‘modules’ page - there a load of ‘read more’ buttons on there.

Hope it helps…

3 Likes

Thanks so much! It certainly helps to see how you’ve put it all together.

Awesome work on the site too, looks great!

Cheers.

thank you! it work for me, almost spend 3 hrs… haha… wish i could just copy paste this button but anyway congrats for making this work. I think Webflow should make a tutorial for this a long with their click trigger interaction.