I want to add a border to my button on hover event without moving the button or anything [duplicate]

Question

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 displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.

I made a fiddle to demonstrate the problem: Click me

I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px; to the hover classes, however, that "squeezes" the button, which is not what I want.

Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.

Any advice?

Thanks in advance

Answer 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>

Answer 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;
}

Answer 3

You can:

• use the box-shadow fiddle demo

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

Answer 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