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

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>

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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>