Hover state issues

Jul 10, 2015

I'm working with a brand that requires us to create custom buttons for interactions. They are very simple, just shapes with text and an image (image inserted into the states via this method from Phil Mayor: https://community.articulate.com/discussions/articulate-storyline/states-for-a-group). But some of the regular states are being held over into the hover state for instance. Here's a screengrab from the edit states dialogue:

Hover state 

But this is how it renders out:

Hover state render

I intentionally shifted the white arrow to the left to reveal the black arrow that is left over from the Normal state. You can also see the gray fringe around the "02" that shows the black version of that text beneath.

What's going on with the states? I didn't leave the black versions on the hover and down state so how do I fix this issue?

6 Replies
Phil Mayor

Hi Brad

Most of the built in states are built on top of the normal state which is why those objects are there.  If you can use shapes to build the arrow in normal and change its colour in Hover this won't happen, but may not be ideal for your brand. 

The other option is to use a custom state as these are not built on top of Normal but you would need a trigger to then change the state on hover.

This is the way the built in states work as they are additive on top of normal, I think selected is the only one that isn't.

Hope this helps a bit.

Brad Magnus

Hey Phil, thanks for the input quite a while back now! I redid the buttons to start from a text box with no shape formatting. Then inserted the background images on the states. For what it's worth I found it's best to start from a text box, so that when you copy paste the button, and change the button text it changes across all states (as opposed to starting from the image which makes dealing with text very buggy). 

This discussion is closed. You can start a new discussion or contact Articulate Support.