How to properly hover and highlight buttons in CSS

Question

I just started learning CSS and I made two buttons for practicing padding and margin mechanics. Now, I want to make the buttons a little large so that it pop ups. But, I dont want one button to push the other one to so that it can grow. I got it right for the save button but I cannot get it right for the other one.

.apply-button {
  margin-left: 20px;
  margin-right: 20px;
  background-color: rgb(10, 102, 194);
  color: white;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 120px;
  font-weight: bold;
  font-size: 17px;
  margin-top: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, margin-left 0.15s, margin-right 0.15s, padding-left 0.15s, padding-right 0.15s, font-size 0.15s;
}

.apply-button:hover {
  margin-left: 13px;
  margin-right: 13px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 18px;
  background-color: rgb(0, 59, 122);
  color: rgba(255, 255, 255, 0.801);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.26);
}

.save-button {
  margin-left: 18px;
  margin-top: 50px;
  background-color: rgb(255, 255, 255);
  color: rgb(10, 102, 194);
  border-color: rgb(10, 102, 194);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 40px;
  border-width: 2px;
  border-style: solid;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  transition: box-shadow 0.15s, margin-left 0.15s, padding-right 0.15s, padding-left 0.15s;
}

.save-button:hover {
  margin-left: 10px;
  background-color: rgba(87, 171, 255, 0.26);
  padding-left: 24px;
  padding-right: 24px;
  border-width: 3px box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
}

.save-button:active {
  background-color: rgb(10, 102, 194);
  color: white;
}

<button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>

I tried to make the margins smaller with respect to the padding increasing as I hover. Theoritically it should work but the larger one is still pushing the other one as it enlarges. Again, i'm just starting out and there are probably other ways to do it. Thank you.reference video

Answer 1

Using transform: scale; make it better.

.apply-button {
  margin-left:20px;
  margin-right:20px;
  background-color:rgb(10, 102, 194);
  color:white;
  border:none;
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:120px;
  font-weight:bold;
  font-size:17px;
  margin-top:none;
  cursor:pointer;
  transition: all 0.5s ease;
  transform: scale(1);
}
.apply-button:hover {
  transform: scale(1.2) perspective(1px);
  background-color:rgb(0, 59, 122);
  color:rgba(255, 255, 255, 0.801);
  box-shadow:0px 4px 10px rgba(0, 0, 0, 0.26);
}
.save-button {
  margin-left:18px;
  margin-top:50px;
  background-color:rgb(255, 255, 255);
  color:rgb(10, 102,194);
  border-color:rgb(10, 102,194);
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:40px;
  border-width:2px;
  border-style:solid;
  font-weight:bold;
  font-size:17px;
  cursor:pointer;
  transition: all 0.5s ease;
  transform: scale(1);

}
.save-button:hover {
  transform: scale(1.2) perspective(1px);
  background-color:rgba(87, 171, 255, 0.26);
  box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
  
}
.save-button:active {
  background-color:rgb(10, 102,194);
  color:white;
  
}

<button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>