Как убрать увеличение блока, когда увеличивается кнопка при наведении?

Question

[Сергей]

Есть DIV, в нем - кнопка.

<div id="main">
  
           <input type="button" name="button" onClick="go();" value="START">

</div>

При наведении на кнопку она немного увеличивается. Но вместе с ней увеличивается и сам DIV.
CSS:

#main {margin: 10% auto 5px;
background-color: #00CCFF;
    width: 50%;  
    text-align: center;
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 25px;
    padding: 23px;
    border: 2px solid #FFFFFF;
    border-radius: 8%;
}

#button {
background-color: #00CCFF;
border-width: 2px;
border-style: solid;
border-color: white;
color: white;
font-size: 18px;
border-radius: 5px;
}

#button:hover {
width: 110px;
height: 40px;
background-color: white;
border-width: 2px;
border-style: solid;
border-color: white;
color: #00CCFF;
font-size: 18px;
border-radius: 5px;
}

Как сделать так, чтобы увеличивалась только кнопка, а DIV был фиксированным?

Comments

[Юрий Лобанов]

@vazonov где реакция на ответ, раз уж Вы появились на тостере снова?

Answer 1

[Юрий Лобанов]

Пропишите фиксированную высоту блоку height:33px;
jsfiddle.net/iiil/qg893

в коде у Вас не прописан id у кнопки.

Answer 2

[Alexey Burlakov]

Попробуйте как в bootstrap:

#button:hover{transform:scale(1.2)}