CODEWITHSUNDEEP
htmlcss
takeradi
takeradi

Reputation: 3871

On line-height change, adjacent buttons and text below buttons move down when one button is clicked

I have a .button class which on the active state adds an inset box shadow and increases the line-height by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?

Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the line-height.

.button{
  display: inline-block;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Upvotes: 1

Views: 437

Answers (3)

Mohammad Usman
Mohammad Usman

Reputation: 39392

Just add vertical-align: top; to your .button styles.

Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.

.button{
  display: inline-block;
  vertical-align: top;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Upvotes: 3

Sergio Tx
Sergio Tx

Reputation: 3868

You can try this with a transformation:

.button{
  display: inline-block;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  transform:translateY(2px);
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Upvotes: 0

Laurynas
Laurynas

Reputation: 91

I would suggest making the line height 38px and adding transparent box shadow (of the same height) when button is not active. This way in active state nothing will be moved.

Upvotes: 0

Related Questions