I Want To Add A Border To My Button On Hover Event Without Moving The Button Or Anything

right now I want to implement a border on hover on a button. That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being display

Solution 1:

You could try using a box shadow instead, as this doesn't actually affect the positioning:

a {
  transition: all 0.8s;
  margin: 5px;
  text-decoration: none;
  display: inline-block;
  background: lightgray;
  height: 50px;
  width: 150px;
  line-height:50px;
  text-align: center;
  color:black;
}
a:hover {
  box-shadow: 0 -3px red;
}

<a href="#">HOVER ME</a><a href="#">NOTICE</a><a href="#">HOW</a><a href="#">I</a><a href="#">DON'T</a><a href="#">MOVE?</a>

Solution 2:

I created a quick example: http://jsfiddle.net/alexcoady/ogoy21dq/
And one with just top or bottom http://jsfiddle.net/alexcoady/ogoy21dq/2/

Use margin to replace border-width when it's not visible.

button {
    margin: 3px;
    border: 1px solid red;
}

button:hover {
    margin: 0px;
    border: 4px solid red;
}

Solution 3:

You can:

• use the box-shadow fiddle demo

.functionButton:hover{
  box-shadow: 0 -4px 0 0 #a3def1;
}

Solution 4:

Style your button to have vertical-align to top. Add the following style to the bottom of your CSS:

#functionButtonDiv button{
    vertical-align: top;
}

Updated jsFiddle

---

Read up: vertical-align | MDN

Solution 5:

Try to understand what is happening.

You want buttons not be squeezed, but a border on top to be added.

Initially your button height was 25px and border was 1px.

On hover your height remains same however the border increases by 3px, hence making your button to squeeze.

Solution:

Hover: height has to be increased to accomodate increased border( 4px-1px = 3px) (in order not to squeeze the button).

If you do this only you will observe that the button starts shifting down.

To avoid it add margin of 4-1 = 3px to your functionButton class to compensate the increased height.

Similarly add a margin of -3px in hover class as the height is already increased by 3px.

.functionButton{
  width:60px;
  height:25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline:none;
  background: #F2F5FD;
    margin-top:3px;    //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}

.functionButton:hover{
  border-top: 4px solid #A3DEF1;
  height:28px;   //increased height to accomodate the increased border
  margin-top:-3px;      //negative margin to avoid shifting of button down
}

.functionButton{
  width:60px;
  height:25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline:none;
  background: #F2F5FD;
  margin-top:3px;
}

.functionButton:hover{
  width:60px;
  height:28px;
  border-top: 4px solid #A3DEF1;
  margin-top:-3px;
}

<div class="functionButtonDiv" id="functionButtonDiv">
    <button type="button" class="functionButton">Dummy2</button>
    <button type="button" class="functionButton">Dummy3</button>
    <button type="button" class="functionButton">Dummy4</button>
</div>