animating button makes adjacent elements move

Question

I have two buttons that animates when hovering.
Whenever I hover on each of buttons, the button pushes away the adjacent elements.
If you look at the GIF below, the hovering button pushes away the other button and also enlarges its parent.

Hovering on Button GIF

HTML : I got two buttons nested by section.


        홈
        마이페이지

CSS1: for section, I gave it a border to see the area clearly.

#section2 {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid blue;
}

CSS2 : for buttons

.commonBtn {
    font-family: 'GmarketSansBold';
    text-decoration: none;
    color: black;
    letter-spacing: 2px;
    font-size: 20px;
    display: none;
}

.commonBtn.button {
    position: absolute;
    width: 190px;
    padding: 0;
    margin: 10px 20px 10px 0;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    color: #4B4D52;
    border-radius: 5px;
    transition: all 0.2s;
}

.commonBtn.btnPush {
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(104, 109, 224, 0.5);
    border-radius: 50px;
}

.btnPush:hover {
    margin-top: 15px;
    margin-bottom: 5px;
    border: rgba(104, 109, 224, 0.5) 3px solid;
}

.commonBtn.btnPush:hover {
    box-shadow: 0px 0px 0px 0px #007144;
}

Same thing happens for the other page which including the same animating button.

I searched and tried every answer on S/O but nothing helps yet.
Is there a way to prevent the buttons push away other elements not using "position: absolute;" ?

+) EDIT

Structure of the file

user_13946583 · Answer

I have changed the transitions slightly, but try this:

#section2 {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0000fc;
}

.commonBtn {
  font-family: 'GmarketSansBold';
  text-decoration: none;
  color: black;
  letter-spacing: 2px;
  font-size: 20px;
}

.commonBtn.button {
  width: 190px;
  padding: 0;
  margin: 10px 20px 10px 0;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  color: #4B4D52;
  border-radius: 5px;
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.commonBtn.btnPush {
  background: #FFFFFF;
  box-shadow: 0px 4px 20px rgba(104, 109, 224, 0.5);
  border-radius: 50px;
}

.btnPush:hover {
  transform: scale(0.9);
}

.commonBtn.btnPush:hover {
  transform: scale(0.9);
}


  홈
  마이페이지

animating button makes adjacent elements move

1 Answers