Border-width + Hover causes issues with Padding inside a <div> causing it to "move"

[bringacupcake]

Apply on Company Website Save

.apply-button { background-color: rgb(12, 91, 196); color: white; border: none; cursor: pointer; font-weight: bold; font-size: 16px; border-radius: 25px; padding: 16px 60px; margin: 10px 2px; transition: background-color 0.15s; }

.apply-button:hover { background-color: rgb(12, 70, 196); }

.save-button { background-color: white; color: rgb(12, 91, 196); border: 1px solid rgb(12, 91, 196);
cursor: pointer; font-weight: bold; font-size: 16px; border-radius: 25px; padding: 16px 40px; margin: 16px 10px; }

.save-button:hover { background-color: rgba(12, 92, 196, 0.37); border: 2px solid; }

I can't seem to make the border not move when I hover over it unless I use width & height.

[SuperSimpleDev]

Hm, maybe try offsetting the thicker border by decreasing your padding?

.save-button:hover {
  background-color: rgba(12, 92, 196, 0.37);
  border: 2px solid;
  padding: 15px 39px;
}

You'll also need to add a transition for the padding to make it smooth

.save-button {
  ...
  transition: ...
    padding 0.15s;
}

[SuperSimpleDev]

Oops sorry I forgot to do that in the solutions. I'll update the solutions code.

[SuperSimpleDev]

@bringacupcake thanks for pointing this out!

[SuperSimpleDev]

Okay, I've also updated this in the sample solution code. https://github.com/SuperSimpleDev/html-css-course-2022/blob/main/1-exercise-solutions/lesson-04/4e.html

[bringacupcake]

Thanks, I ended up troubleshooting the issue and working a lot on working with padding and margins when I hover and how to isolate the issue.