Can we have buttons with Image fill and color change on hover?

This wouldn’t be hard to do in HTML by setting a background-color on hover. But if I understand Hype’s controls correctly, you have to choose between an image fill and a color fill.

@davidrhoden

Are you referring to background color (CSS background-color) or font colour (CSS color)

The “Background -> Fill Style -> color” is just that … Background Fill

The font color can also be changed on hover by adjusting the color under the Typography tab.

Or do you mean to have the button’s background change on hover then you would do this by choosing “Hover”

and changing the background fill in the inspector.

If you mean have a color fill in the normal state and then a gradient or image fill in the hover state then you cannot do this using the above technique … you will have to code in the CSS in the Head HTML

I want to do the latter, change the background color while also having a
transparent PNG image fill.

As it is now, I can get that effect, but I have to make two images, one for
the resting state and one for the hover.
2 HTML requests, and twice the K weight.

You can do this by doing the following:

• create a button
• choose your colours for the “normal” , “hover” and “pressed” states if you need different colours for each state
• assign your button an id
• in your Head HTML paste the following (remember to change MY-ID for your actual id

<style>
#MY-ID {		
		background-image: url("${resourcesFolderName}/NAME OF YOUR IMAGE FILE");
		background-size: 104px 29px; /* OPTIONAL SIZING OF YOUR IMAGE TO FIT THE BUTTON THESE ARE ACTUAL DIMENSIONS OF DEFAULT HYPE BUTTON */
	}
</style>
1 Like

One drawback to this approach that I’ve found:

If the image you are using as the background is not placed on a layer, it won’t be exported with the banner.

My workaround is to place it on the lowest level and set its opacity to zero.