Webstudio

Log inLog into community

Join the Webstudio community

Updated last month

How to do this big button

How to do this big button

At a glance

·

hello guys, i am new with webstudio. i would like to make a hover effect like the one in the projects present at this link: du2design.com (my website) normal state of the single project link, no text and image at 100% opacity. when i am in the hover state, i want the text to appear and the image to be opaque. how can i do it? Tx in advance

Attachment

Screenshot_2025-04-22_alle_16.17.45.png

O

d

B

11 comments

You want to use css variables for this

this will probably explain https://www.youtube.com/watch?v=rg49mmDvdlE

tx i'll try, it's a little bit tricky for those like me it's new with webstudio 🥲

why there are so many ocapity levels on the right? anyway I'm not getting this thing to work

Attachment

Screenshot_2025-04-22_alle_17.35.25.png

Must be a bug. Fixing

@Bogdan do you see how to reproduce this?

Yep, add animation group with fade in

but with fade in on animation group i won't have 2 different movemente (img opacity and text opacity) change togheter

@Bogdan we're talking about the hover state, not of the way the whole button appears on the screen

Can you share your project please?

senti in direct

Add a reply

Sign up and join the conversation on Discord