Tearing my hair out on this one!
So I add a button and create a class for it.
I then add different images for the different states.
But when I preview all I get is a grey button.
What am I missing? Cheers.
Don’t tear too much hair out!!! It’s quite simple really.
Create your button on the page and with the button selected, create a custom class. In my example I used the class name my-button. Click on the custom class to open the class editor window, When it opens it will show the normal state settings. Add your background image and set its width (I set mine to 100%) I also position the image to be centre-centre and no repeat. This is how it looks:
You can now switch to the hover state and add your second image. Keep all the other settings the same as used on the normal state. This is how it looks:
Using the same class, you can edit some other things such as the height of the button, the text and its position within the button. You do this by switching to the Metrics tab and making changes there. This is how my settings look:
And this is how the final buttons look:
NORMAL State
HOVER State
Thanks for going to all that effort. But that’s exactly what I did. But the buttons are just solid grey when I preview or export.
Going bald rapidly, here.
So I set the buttons up as usual. Then exported to HTML. Then manually copied all the images to the img folder. Refreshed the browser, and it worked. But I know that cannot be right, because all the videos I see about it show the hover state in preview mode. :-/
It’s a mystery to me. I’ve never seen that behaviour. If I did see that issue I would delete the button, close the app, restart the computer and add a new button after the reboot. I would then apply the same class to the new button and see if that worked. Sometimes, a simple deletion of a troublesome object, followed by a restart can solve the issue.