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

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

Answers:

Answer

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

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

You can:

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

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

Answer

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>

Answer

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>

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.