Change y position of autolayout variant on hover

[Tim_Bruce]

For some reason this seemingly simple interaction is stumping me.

I have an auto layout button that I would like to ‘jump’ up 1px on the y axis on hover. The hover state is a variant of the primary button. Both need to resize horizontally so that if they’re nested in other horizontal stacks they behave as expected.

My current approach is to nest the auto layout button within another frame, and then give it a -1px offset on the y-axis.

However with this approach the outer frame cannot resize, and if I make the outer frame an auto layout then the offset can’t be applied.

Another technique is to apply and auto layout to the outer frame and then toggle on absolute positioning on the button and offset it by 1px. However then resizing of the outer frame is is ignored becasue the item has been removed the item from the stacking order.

[Dennis_N]

I would use the zero-height frame technique (see my “spacer” frame).

The first spacer (in default state) is set to 0.001 px height, the second one in this example is 8px high to push the button up and out of our frame.

The outer auto layout is set to width: hug, height: fixed and the elements are bottom-left alligned.

[Derek_Avila]

Other method can involve a separated background and different paddings for the hover variant

The background layer is set to Absolute position with constrains to both sides