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

You may also find this question of interest: Add a CSS border on hover without moving the element — jbutler483
– jbutler483, Commented Apr 14, 2015 at 13:46
Set all your buttons to Box-sizing: Border-box in your CSS. Then the problem goes away. — Mckay Multimedia
– Mckay Multimedia, Commented Apr 14, 2015 at 13:49
Are you looking for the one in the red section here: tympanus.net/Development/CreativeButtons ? — Rahul Desai
– Rahul Desai, Commented Apr 14, 2015 at 13:54

jbutler483 · Accepted Answer · 2015-04-14 13:44:11Z

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, 2015 at 13:44

answered Apr 14, 2015 at 13:35

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dan Beaulieu Over a year ago

I didn't realize you could just add "transition: all 0.8s;", very cool +1.

jbutler483 Over a year ago

That works with any animatable property.

Ankit Over a year ago

does this also work on old versions of IE. ie IE7 and older?

Dan Beaulieu Over a year ago

less than 0.1% of people are on IE7

jbutler483 Over a year ago

@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)

|

Alex · Accepted Answer · 2015-04-14 14:09:18Z

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, 2015 at 14:09

answered Apr 14, 2015 at 13:35

Alex

8,7039 gold badges47 silver badges58 bronze badges

4 Comments

Dan Beaulieu Over a year ago

@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

jbutler483 Over a year ago

@DanBeaulieu: Or one could set it to transparent....

Dan Beaulieu Over a year ago

@jbutler483 there you go

Alex Over a year ago

one isn't able to do either as there is a 1px default border in OP's style

Roko C. Buljan · Accepted Answer · 2015-04-14 14:12:29Z

3

You can:

use the box-shadow fiddle demo

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

edited Apr 14, 2015 at 14:12

answered Apr 14, 2015 at 13:33

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Alexander Solonik Over a year ago

always the the correct answer !!

Alex Over a year ago

By default OP has a 1px border though

Rahul Desai · Accepted Answer · 2015-04-14 13:41:20Z

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, 2015 at 13:41

answered Apr 14, 2015 at 13:34

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Comments

Ankit · Accepted Answer · 2015-04-14 13:55:59Z

2

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>

edited Apr 14, 2015 at 13:55

answered Apr 14, 2015 at 13:41

Ankit

1,1051 gold badge9 silver badges20 bronze badges

3 Comments

Alex Over a year ago

Or change to box-sizing: border-box;

Ankit Over a year ago

user has many solutions... my focus was to explain him, what is happening..

Sossenbinder Over a year ago

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 !

jbutler483 · Accepted Answer · 2015-04-14 13:38:13Z

0

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>

edited Apr 14, 2015 at 13:38

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

answered Apr 14, 2015 at 13:35

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

1 Comment

jbutler483 Over a year ago

you might want to have a quick check on this ;P

Shelly · Accepted Answer · 2015-04-15 02:23:50Z

0

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

edited Apr 15, 2015 at 2:23

Shelly

3531 silver badge7 bronze badges

answered Apr 14, 2015 at 13:48

anand kulkarni

1561 silver badge12 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

9 Comments

4 Comments

2 Comments

Comments

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

9 Comments

4 Comments

2 Comments

Comments

3 Comments

1 Comment

Comments

Linked

Related