Component variants with semitransparent overlay at hover state

In fact, you can place another background layer in the auto layout button using a zero-height frame. I made an example file that has two options: using the above hack and using color styles. Take a look and choose the best way for you.

Thanks @tank666. Very cool hack, but I worry about the engineer handoff - when you Inspect that button, you don’t see the #000 4% identified anywhere, just that there’s a 0px tall something inside Auto Layout. It’s fine if the overlay object is right there, and you communicate it for this single button, but if you go deeper into a project and have engineers that are not as savvy, it might cause issues?

Looking at the file from the link above, you see it exactly the same as the developers. Try clicking on any button with an overlay, and then examine the code in the Inspect Panel. Do the same for the button, which is built only through color styles.

You can also show this file to your developers so they can study it and tell you which option is better.

@Christina_Yung, if you have “Can Edit” permission, then click on the overlay while holding CTRL or CMD. If the permission is “Can View” then CTRL/CMD work the other way around. That is, the developer clicks on the “btn” without pressing CTRL / CMD, and thus selects the overlay layer (for example, “overlay/hover” instance).