Text below is moves when I put a text shadow above - html

Question

so I have text on the top when you hover over it, it gains a box shadow. but unfortunately, the text below it gets moved.
I have searched for a while but could not find any solutions. Please help.
edit:
butto{
border:none;
outline:none;
background-color:white;
padding:2px;
cursor: default;
}
butto:hover{
background-color:#e3e3e3;
display: inline-block;
box-shadow: 2px 2px grey;
}
html{
background-color:black;
}
<butto onClick="print()" class='no-print'>Print</butto>
<p style="color:white;">Text below!</p>

Answer 1

Just move display property from the hovered to the general state:
butto {
border: none;
outline: none;
background-color: white;
padding: 2px;
cursor: default;
display: inline-block;
}
butto:hover {
background-color: #e3e3e3;
box-shadow: 2px 2px grey;
}
html {
background-color: black;
}
<butto onClick="print()" class='no-print'>Print</butto>
<p style="color:white;">Text below!</p>

Answer 2

The reason why your text below is being pushed, is because you have display: inline-block property assigned to the hover class.
Removing it will bring it to default display: initial and will solve your problem.
P.S. also make sure to update <butto> tag to <button>, as that might result an unexpected behaviour while developing.

Answer 3

Try to change your display: inline-block to content
also read what is display: content here
butto{
border:none;
outline:none;
background-color:white;
padding:2px;
cursor: default;
}
butto:hover{
background-color:#e3e3e3;
display: content;
box-shadow: 2px 2px grey;
}
html{
background-color:black;
}
<butto onClick="print()" class='no-print'>Print</butto>
<p style="color:white;">Text below!</p>