CODEWITHSUNDEEP
htmlcssbuttonalignmentpositioning
Narong
Narong

Reputation: 476

Button Hover Change Other Elements' Position

I've created some simple buttons with hover and active effects and they work just fine. When there are multiple buttons on a row, hovering/clicking on the button doesn't cause a problem. However, when there's only a single button on a row by itself, hovering over it or clicking on it causes other elements to shift their positions. I've tried using margin-top and just top positioning, but the same problem occurs. This is happening in Chrome.

Here's my setup:

HTML:

<button>NO</button><button>PROBLEM</button><br />
<button>PROBLEM</button><br />
<button>NO</button><button>PROBLEM</button>

CSS:

body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}

button {
  position: relative;
  border-width: 0 1px 4px 1px;
  border-color: #d9372e;
  border-style: solid;
  background-color: #ff4136;
  padding: 8px 12px 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #fff;
  outline: none;
}

button:hover {
  top: 1px;
  border-bottom-width: 3px;
}

button:active {
  top: 2px;
  border-bottom-width: 2px;
}

Edit: JSFiddle

Upvotes: 1

Views: 2779

Answers (1)

Control Freak
Control Freak

Reputation: 13243

The outerHeight of the button is being changed on :hover/:active when you apply the margin's and border width's on them, the other button must compensate somehow since they are smaller.

Anyways, to fix your issue, apply margin-bottom on the hover/active styles to balance out the outerHeight (or the bottom to 4px total), like so:

button:hover {
 top: 1px;
 border-bottom-width: 3px;
 margin-bottom:1px;
}

button:active {
 top: 2px;
 border-bottom-width: 2px;
 margin-bottom:2px;
}

Example: http://jsfiddle.net/p6ohgy5n/2/

Upvotes: 1

Related Questions