Streaming live at 10am (PST)

How do you create an interactive, responsive layered button animation that reveals hidden text when clicked? [see public share link for reference]

Re: How do you create an interactive, responsive layered button animation that reveals hidden text when clicked? [see public share link for reference]

Hello all, I am looking to create a very simple, single-page online portfolio, with four responsive rectangular buttons, each taking up a quarter of the page. I am going for a retro Bauhaus look and hope to add more pages in the future, but right now, I am only looking to include hyperlinks to my socials and Patreon page behind these buttons. Please refer to the image below:

Would anyone be able to show me how I would go about creating four hidden-button layers underneath each of the four buttons in the image above?

I would want for each of the four buttons to be activated by a mouse click, and the visible button to “swoosh” upwards, revealing the hidden text, links underneath. When another button, “Contact”, for instance, is pressed, this would open instead, and the original button would close as before. In other words, only one button would be open at one time.

I have mentioned also how I would like this portfolio to be responsive. When viewed on a smartphone, the webpage instead looks like this:

How would I make it that instead of the buttons exclusively “swooshing” upwards, as with the desktop view (and then downwards when another button is clicked), the buttons simply fill the ENTIRE mobile device screen, and a user would have to tip their screen to landscape in order to revert to the “default” desktop view?

I am sure these questions are cripplingly simple, but I am unfortunately still in the Webflow “beginner” phase. I have linked the read-only link to my webpage for your reference.

Many thanks, Calum


Here is my public share link: Webflow - index.html + edits