'Button pushing content down on hover

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>
<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>
htmlcss


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions