CSS Border Property

Question

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?

Answer 1

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.

Answer 2

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/