CSS: Adding border to button on hover. How avoiding a shifting of the following elements?

Question

My idea is to add a colored border to the submit button when the user hovers it.

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

But the immediately following text then becomes shifted downwards.

How can I get rid of these "Jumping" text while simultaneously having the border?

score 8 · Answer 1 · answered Sep 08 '16 at 07:48

You need to define transparent border by default on button and change border-color on hover. Further avoid changing font-weight property on hover as well as it will also expand the width and height of button and it will jump on hover.

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border: 6px solid transparent;
  font-weight: 800;
  border-radius: 4px;
  padding: 5px 10px;
}

button:hover {
  border-color: crimson;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

Awesome answer, so simple I didn't even think of it – GMaiolo Dec 31 '21 at 01:19 — GMaiolo, Dec 31 '21 at 01:19

score 5 · Accepted Answer · edited May 23 '17 at 12:01

5

Add "margin" attributes to your "button" CSS like so:

button {
  border-radius: 4px;
  padding: 5px 10px;
  margin: 4px 0;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
  margin: 0;
}

From Stop an element moving with padding on hover.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 08 '16 at 07:49

MJH

2,301
7
18
20

Thanks a lot. One question left: margin is 4px and border is 6px. => There's a difference of 2px left. Are does 2px the default border the button has already? So that we have only 4px instead of full 6px ... – mewi Sep 08 '16 at 08:21
No. It's actually a difference of 2px the other way, because the 4px sets both the top and bottom margins, giving 8px total of vertical margin. I initially tried 3px (6px total), but it was still shifting, so I bumped it up by 1px to prevent that. – MJH Sep 08 '16 at 08:31
Thanks for answering. I still think these inaccuracy might be caused by the browser's default CSS. After applying a reset it worked exact. Like expected. See my fiddle here: https://jsfiddle.net/hax1prjv/ – mewi Sep 08 '16 at 08:45

score 3 · Answer 3 · answered Sep 08 '16 at 07:48

Just to give an alternative you could use outline to set the "border" on hover.

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}
button {
  border: 0;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 5px 0;
}
button:hover {
  outline: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

Another option:

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}
button {
  border-radius: 4px;
  padding: 5px 10px;
  margin: 6px 0;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
}
button:hover {
  border-width: 6px;
  border-style: solid;
  border-color: crimson;
  font-weight: 800;
  margin: 2px 0;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

outline was the cleanest option – Shekhar Sahu May 27 '22 at 13:08 — Shekhar Sahu, May 27 '22 at 13:08

score 1 · Answer 4 · answered Sep 08 '16 at 07:46

1

Here are some possibilities:

Style the button dimensions (padding/margin/border) with the same px/em values like it's :hover state
set the button position to absolute/fixed
Use a fix height in a parent div

answered Sep 08 '16 at 07:46

Marcel Müller

36
5

Possibility 1. is helpful. Possibilty 2. has side-effects on the following text. – mewi Sep 08 '16 at 08:02
Correct, 2 or 3 only works for fix size elements like icons on corner buttons – Marcel Müller Sep 08 '16 at 08:25

score 0 · Answer 5 · answered Sep 08 '16 at 07:45

check now

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
 border: 6px solid transparent;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

score 0 · Answer 6 · answered Sep 08 '16 at 07:47

Try adding height to button

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
   border-radius: 4px;
   padding: 5px 10px;
   height:40px
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

Dhaarani · Answer 7 · 2016-09-08T07:59:17.717

Mention the width and height to the button and remove the font-weight to avoiding a shifting of the element when hover the elements. Check below code.

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
  height:50px;
  width:100px;
}

button:hover {
   /*font-weight: 800;
  background-color: white;*/
  border: 6px solid crimson;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  
  <div>Please notice that ...</div>
</div>

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
  height:50px;
  width:100px;
}

button:hover {
  border: 6px solid crimson;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

score 0 · Answer 8 · answered Sep 08 '16 at 07:53

0

Add padding of the same size as the border to the button, and remove it on hover.

answered Sep 08 '16 at 07:53

TechnicalTophat

1,655
1
15
37

CSS: Adding border to button on hover. How avoiding a shifting of the following elements?

8 Answers8