Unexpected behavior from css

I’m working on building a portfolio site, but I’m getting some unexpected behavior from the CSS. Here is the code pen link

https://codepen.io/qtheginger/pen/wRaGrK

The side buttons are supposed to act the same as the top button, where it expands towards the center of the page. The side buttons do a weird shift though, where they seem to slide down a bit, and not expand as they are supposed to. Any suggestions?

Its because your padding here:

#left-btn:hover {
    background-color: grey;
    padding-top: 10px;
}

sorry but could you elaborate? It’s still moving to the right as well, but also down. If I try padding left, it has a way worse behavior, where it grows wider. I can’t figure out how to exactly copy the behavior of the top tab. Thanks!

At first glance I thought that padding-top is the reason causing that behavior.
Would you please change your #left-btn:hover css code to:

#left-btn:hover {
  background-color: grey;
  transform: translate(5px,-5px) rotate(-90deg);
  border-top: 10px solid grey;
}

and for the #right-btn:hover change it to:

#right-btn:hover {
  background-color: grey;
  transform: translate(-5px,-5px) rotate(90deg);
  border-top: 10px solid grey;
}

and let me know your opinion.

1 Like

Thank You! I didn’t think about overwriting the unwanted behavior with new CSS. I’m gonna leave this open a bit longer, just so that maybe someone can explain what caused the behavior, for the sake of learning.

Do you remember the:

position:absolute;
top: 50%;

values on your left/right btns?

Yes. Sorry it took me so long to respond. How does that impact the hover functionality?

Every change to that element dimensions is affected by that top:50%; because css will try to move element to be at 50% of the height

1 Like