Putting a state button within a state button?

[sophb16702170]

Hi,

So I want to create an effect where at Normal state you have an image with a text. On rollover state, more text appear over it and a another state button appears wtih text "View more". I want this state button to stay white, until you roll over it at which point it should turn red.

The difficulty I am having is that the roll over state is activated for both buttons at the same time - both the text appears AND the appears "View More" but in the color red. I would like this view more button to stay white until it is rolled over.

I have tried creating a state button within a state button, creating all the elements separately and then putting them in a state button. No luck.

The effect I am trying to create is used by for example this website: Projects – Rothelowman

Does anyone know how to do this??

Any help much appreciated!!

[Günter Heißenbüttel · Accepted solution]

Do you think of something like that:

Yes it can be done, with some small restrictions concerning responsiveness. But this can be compensated by breakpoints.

Here the sample file for this construction: https://www.dropbox.com/s/tnkypb0cpvrmqbn/State-in-State.muse?dl=0

Try to figure out, how it is done, and ask, if you run into problems.

[sophb16702170]

Hi Günter,

Thank you for your file, its exactly what I am trying to do. I feel that I am close, however the Lorem Ipsum text box seems to be composed of 2 objects? Where each has different formatting in the different states. In the layers panel it says its one text box but upon clicking I can see there is 2 objects.

Could you clarify for me how this text box is built up? I though maybe it was a text box within a textbox or a rectangle but can't get it to work.

Thank you!

[Günter Heißenbüttel]

As you already mentioned, it wouldn‘t be enough, to place a state button into a state button. They would react in the same way on mouseover/mouse click, and that is not your intention.

So I choose a different construction:

• Place the „outer“ state button, containing the image with its different states.
• Create a text frame somewhere on the Muse canvas, and style it like a button.
• Copy this text frame into another text frame, just as you would copy text into it and assign a link to it.
• Place this „text in text“ element into the state button.

Thats it.

The restriction:

This „text in text“ button doesn‘t react responsively, and it is quite tricky, to place it at an exact defined position within the  „outer“ — responsive — state button, so that it moves synchronously with the outer state button. This is difficult, because the „outer“ state button is „forced“ to scale proportionally by placing an equally sized image into it, and the text inside doesn‘t scale at all (all “inline“ elements, except slideshows, are not scaling responsively in actual Muse.)