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

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

You may also find this question of interest: [Add a CSS border on hover without moving the element](http://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element) — jbutler483, Apr 14 '15 at 13:46
Set all your buttons to Box-sizing: Border-box in your CSS. Then the problem goes away. — Opaw Nako, Apr 14 '15 at 13:49
Are you looking for the one in the red section here: http://tympanus.net/Development/CreativeButtons/ ? — Rahul Desai, Apr 14 '15 at 13:54

jbutler483 · Accepted Answer · 2015-04-14T13:44:11.023

11

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>

edited Apr 14 '15 at 13:44

answered Apr 14 '15 at 13:35

jbutler483

24,074
9
92
145

1

I didn't realize you could just add "transition: all 0.8s;", very cool +1. – Dan Beaulieu Apr 14 '15 at 13:43
1

That works with any animatable property. – jbutler483 Apr 14 '15 at 13:44
does this also work on old versions of IE. ie IE7 and older? – Ankit Apr 14 '15 at 13:51
@Ankit: I haven't really supported ie8 for a while now. But has better support than box-sizing (which only has partial support) according to http://caniuse.com/ – jbutler483 Apr 14 '15 at 13:54
2

less than 0.1% of people are on IE7 – Dan Beaulieu Apr 14 '15 at 13:55
@DanBeaulieu yes, i know and I hate those 0.1% people. But you also have to keep them in consideration. Specially when you are making a web application for a company's internal use. – Ankit Apr 14 '15 at 13:59
thats what Im doing right now actually... and i've just found out that about 50% of the staff here are on IE 8 so I certainly understand what you mean. A dream of mine is to rally up the developer community to purposely make anything on IE8 and under look terrible and unusable. – Dan Beaulieu Apr 14 '15 at 14:02
2

@Ankit: If they are on IE7, then the box shadow won't show. It won't break any of the functionality. You could even give them instructions as to how to update (Even Microsoft is [stopping support for IE8 soon enough](http://www.techtimes.com/articles/12659/20140811/dingdong-internet-explorer-8-is-dead-microsoft-will-end-its-life-in-january-2016.htm)) – jbutler483 Apr 14 '15 at 14:02
Very elegant solution. +1 :) – Rahul Desai Apr 14 '15 at 15:15

Alex · Answer 2 · 2015-04-14T14:09:18.870

5

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

edited Apr 14 '15 at 14:09

answered Apr 14 '15 at 13:35

Alex

8,353
9
45
56

@afasm93 this is a good solution, one could also set the initial border to white (or whatever the background is) and then just simply change the color of the border on hover – Dan Beaulieu Apr 14 '15 at 13:38
@DanBeaulieu: Or one could set it to transparent.... – jbutler483 Apr 14 '15 at 13:39
@jbutler483 there you go – Dan Beaulieu Apr 14 '15 at 13:40
1

one isn't able to do either as there is a 1px default border in OP's style – Alex Apr 14 '15 at 14:26

Roko C. Buljan · Answer 3 · 2015-04-14T14:12:29.527

3

You can:

use the box-shadow fiddle demo

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

edited Apr 14 '15 at 14:12

answered Apr 14 '15 at 13:33

Roko C. Buljan

196,159
39
305
313

1

always the the correct answer !! – Alexander Solonik Apr 14 '15 at 13:48
2

By default OP has a 1px border though – Alex Apr 14 '15 at 13:50

Rahul Desai · Answer 4 · 2015-04-14T13:41:20.870

2

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

edited Apr 14 '15 at 13:41

answered Apr 14 '15 at 13:34

Rahul Desai

15,242
19
83
138

Ankit · Answer 5 · 2015-04-14T13:55:59.660

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>

user has many solutions... my focus was to explain him, what is happening.. — Ankit, Apr 14 '15 at 13:43
Thanks for the explanation! I found the box shadow answer to be the best fitting one, but the explanation made the problem clear for me ! — Sossenbinder, Apr 14 '15 at 14:05

score 0 · Answer 6 · edited Apr 14 '15 at 13:38

You probably don't need Javascript for this.

You can use box-sizing to make sure that borders are included in your dimensions and vertical alignment to maintain position.

button {
    vertical-align: top;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.functionButtonChat {
  width: 60px;
  height: 25px;
  border: 1px solid #A3DEF1;
  outline: none;
  background: #F2F5FD;
}
.functionButtonChat:hover {
  border-left: 4px solid #A3DEF1;
  border-top: 4px solid #A3DEF1;
}
.functionButton {
  width: 60px;
  height: 25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline: none;
  background: #F2F5FD;
}
.functionButton:hover {
  border-top: 4px solid #A3DEF1;
}

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

you might want to have a quick check on this ;P – jbutler483 Apr 14 '15 at 13:42 — jbutler483, Apr 14 '15 at 13:42

score 0 · Answer 7 · edited Apr 15 '15 at 02:23

use following css i have made some changes in ur css and its working as per ur requirement try the following

.functionButtonChat{
     width:80px;
     height:25px;
     outline:none;
     background: #F2F5FD;
}

.functionButtonChat:hover{
     border: 4px solid #A3DEF1;
}

.functionButton{
     width:80px;
     height:25px;
     outline:none;
     background: #F2F5FD;
}

.functionButton:hover{
      border: 4px solid #A3DEF1;
}

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

7 Answers7

Linked

Related