When creating a wire button (stroke outside & no fill inside) inside of Blocs, you may notice a jumpy effect happens which positions your button slightly higher or lower. This is because you did not add the stroke to the hover effect and set it to 0% opacity.
I’m not sure why it does this? I’ve used this in a menu and it does the same thing. I can use a hover color, even lower the opacity and it does not jump. One I add a border I jumps.
Casey
@casey1823 I think its because adding the stroke makes the buttons size bigger so Bloc tries to adjust the positioning slightly so now when the invisible stroke isn’t there on the hover effect it Bloc thinks the button just got smaller so it repositions it again causing the jumpy effect.
There is a work around using the class that will eliminate the jumpy effect. Say you want a light gray button and the hover state to be darker gray with a black border. In the normal state still use a 1 px border but use the same color as the button. Then when you use a darker gray hover state with a 1 px black border they will be the same size on both normal and hover. This should eliminate the jumpy effect.
Casey