Button pushing content down at hover-CodePudding

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.

HTML:

<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<a href="/credits"><button class="creditsbtn">button</button></a></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>

CSS:

.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;
}

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.

Thanks for any response!!

.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>
<a href="/credits"><button class="creditsbtn">button</button></a></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>

CodePudding user response：

Try doing so :

.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>
<a href="/credits"><button class="creditsbtn">button</button></a></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.

CodePudding user response：

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*/