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>>Solution :
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.