Hope you are all well.
I have a drop shadow on my button that I remove when the button is active to give the effect of it being pushed. However this seems to move all the other items around in the Flexbox too. Does anybody know if there is a fix for this?
Here is the link to the code so far on codepen: https://codepen.io/francescacosta/pen/OgZZvP
Thanks for taking the time to read
Can I look at the js file?
I recommend you use :focus-
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
Unfortunately, with both target and focus the button doesn’t change by removing the box shadow to appear like its being pressed down?
Am I doing something wrong?
I saw your css and I am pretty sure if you remove them from group and assign :active individually to each button and change the css, it should work.
I had a go at fixing it here.
I added a comment after each of the four changes in the CSS file. The size of a button’s shadow doesn’t seem to affect the height of the box containing the button (and if you make the shadow long enough, it will extend outside of the box). So when the margin at the top is increased, the margin at the bottom needs to be decreased by the same amount.
Amazing, Thankyou so much!
I played around with something similar myself, I thought I would have to account for the margins somewhere, but I was only adding the 3px the top thinking that would make up for the loss of the shadow, but now I think about it, that wouldn’t fix it.
Appreciate your effort x