CODEWITHSUNDEEP
htmlcss
user478636
user478636

Reputation: 3424

CSS Border Property

I have added a border to a button on mouse hover but this disturbs the HTML layout. How can I do this without disturbing the HTML layout?

Upvotes: 2

Views: 300

Answers (5)

sandeep
sandeep

Reputation: 92803

You can use css box-sizing property write like this:

.child:hover{
    border:1px solid green;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Check this http://jsfiddle.net/zFJHV/1/

or

you can use 

div{
 border-bottom:1px solid red;
 margin-bottom:-1px;
}

EDIT:

may be you can use outline instead of border check this:

http://jsfiddle.net/zFJHV/2/

Upvotes: 2

DisgruntledGoat
DisgruntledGoat

Reputation: 72510

There are several possible solutions, some of which were posted in other answers.

If you want a border all the way round the element, the simplest and easiest is to add an outline. Outlines do not affect the flow of an element, but they do not work on individual sides. (Their intention is to be used for debugging rather than design.)

button:hover { outline: 1px solid black; }

The solution by Stephanie to reduce the element's width won't move other elements on the page, but since you are shrinking the element's size, the content inside will get moved. (Edit: actually in theory this could wrap some text onto an extra line and thus push some other elements down.)

You can set a negative margin on hover as sandeep said (in his original answer), which effectively cancels out the additional space used by the element. As far as I can tell this doesn't affect the flow but there could be edge cases.

button:hover { border: 1px solid black; margin: -1px; } /* all sides*/
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */

Another solution is to set the border to be the same as the background colour (as Sir Crispalot suggests), or you can make it transparent. Then change the colour on hover. Making it transparent will work on any colour background, but the background colour of the element (the button in your case) will show through.

/* for a patterned page background: */
button { border-bottom: 1px solid transparent; }
button:hover { border-bottom: 1px solid black; }

/* or, if the button has a background colour: */
button { border-bottom: 1px solid #fff; }
button:hover { border-bottom: 1px solid black; }

Upvotes: 1

Riz
Riz

Reputation: 10246

On hover button, add border and reduce width and height 2 px each. This will not change the layout.

Upvotes: 0

Sir Crispalot
Sir Crispalot

Reputation: 4844

Why not have a border there all the time, but initially have it the same colour as the background so it's effectively transparent?

Then simply change the colour on mouseover.

Upvotes: 6

Steph Rose
Steph Rose

Reputation: 2136

On the hover, reduce the width of the button by the pixel width of the border x2.

For instance, if the button is 100px wide and you're adding a 1px border all the way around, then on hover the CSS should be:

width: 98px;
border: 1px solid #000;

Upvotes: 2

Related Questions