Portion of stroke hidden when a button in a group is in hover state

[Clara_Leet]

I’m creating a string of buttons with a 1px stroke. The buttons are set to be tightly in-line, with no space between, and on “hover” the stroke changes colors.

The distance of each button is set to be -1px so that the strokes don’t double up between buttons.

Naturally, for buttons that aren’t on the very top layer, a portion of the stroke is hidden behind the layer in front of it.

Is this something that can be fixed for interactive prototyping to show clients/stakeholders? Or is it just something that I’d have to explain is a limitation of the prototype?

[Brian_Saunders]

Hey Clara, this is possible with variants and interactive components. I tested it quickly by creating the attached screenshot. In instances 2–4 all I did was change the order of the layers. Then I set a hover interaction (with smart animate) on each button in instance 1, so that it changes to the desired instance while hovering. If you need any more help setting this up just let me know.