Button pushing content down on hover - html

Question

I'm working on a website and I have run into a little problem I can't really solve. Basically, I have a credits button that is supposed to have some effects when the user hovers over it. However, if I hover over the button it's pushing down all the contents on the page.
I have tried to solve it quite a bit but sadly I couldn't find a solution. I'm sure I could find a solution sooner or later but I'm on a schedule and have to get some other things on the page done, so I will need to focus on that.
.creditsbtn {
font-family: 'Courier New', Courier, monospace;
color: #333;
background: #AB5DFC;
border-radius: 10px;
border: #AB5DFC;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 10px;
padding-left: 10px;
font-size: 20px;
}
.creditsbtn:hover {
transform: translateY(-5px);
color: #333;
box-shadow: .0rem .2rem .4rem #777;
border: 5px solid #b16afd;
pointer-events: visible;
position: relative;
z-index: 0;
visibility: visible;
float: none;
}
<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<button class="creditsbtn">button</button></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>

Answer 1

Try doing as below (I added comments in my code). The trick is to have that border from the beginning but with a transparent colour, and just change the colour on hover.
.creditsbtn {
font-family: 'Courier New', Courier, monospace;
color: #333;
background: #AB5DFC;
border-radius: 10px;
/* line I added */
border: 5px solid transparent;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 10px;
padding-left: 10px;
font-size: 20px;
}
.creditsbtn:hover {
transform: translateY(-5px);
color: #333;
box-shadow: .0rem .2rem .4rem #777;
/* line I added */
border-color:#b16afd;
pointer-events: visible;
position: relative;
z-index: 0;
visibility: visible;
float: none;
}
<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<button class="creditsbtn">button</button></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>
The animation change a little bit from what you have, but this way you can avoid that pushing problem you have.

Answer 2

Instead of having a border which is pushing the other content down. You could have a solid box-shadow the same colour as the button. This would enlarge the box on-hover without affecting other content. Then add a second box-shadow for the shadowing effect.
box-shadow: 0px 0px 0px 10px #color, 0px 8px 8px #000;
/* before the comma is your enlarged border but set your color.
After the comma is an actual shadow currently set to black*/