Flex box button styling

[Damiaan_Melis]

Hey guys,

Really enjoying getting stuck into webflow, so quick and fluid!

Webflow share link:

I have encountered a little problem though. The site i’m building has a fixed sidebar with lots of buttons and I’m trying to style the buttons so they shift to the right when hovered over (using a simple move 50px to the right interaction on hover). with the the flex layout setting set to stretch it almost works, however I would like to stop the box from expanding out over the edge of the side bar. (see image)

If i set the flex layout setting to ‘align: start’ it doesn’t breach the edge - but then the button doesn’t stretch across the entire side bar and my borders or lines are cut off. (see image)

Can anybody think of a solution or work-a-round for this?

Thanks!

Damiaan

[Cricitem (webTAC | Technology Apprenticeship Center)]

Hey Damiaan!

The simplest solution to this is to not use an interaction, but the hover that you already have set on your elements. Set the “project name” hover to a 25px left padding and adjust your transition timing however you like. Remove the interaction that is moving the whole thing to the right, and you’re done!

Ignore the first few seconds of the gif, I forgot to reselect Chrome so the rollover wasn’t working.

[Damiaan_Melis]

@Cricitem Doh! I should have troubleshooted more! what a simple solution, thank you!!