Salve a tutti,
ho creato una semplice tabella html in cui è presente una cella che deve contenere due campi di tipo "<input>" e due pulsanti ad essi associati.

I due pulsanti sono associati ad una classe che in base alle proprietà hover e active, cambiano il proprio font da 16px a 18px;

Il problema è che nel momento in cui passo il mouse su un pulsante questo aumenta giustamente la sua dimensione facendo scalare tutte le altre righe e celle verso il basso.
Esteticamente è bruttissimo vedere un animazione di un pulsante che sposta la posizione di tutti gli altri campi.

Come posso fare per visualizzare il pulsante animato dalla proprietà hover e allo stesso tempo nn far scalare tutti gli altri contenuti???
codice:
<table>
<tr>
     <td  align=\"center\" >
           


                 <input type='text' id='cognome' size=\"15\" />
                 <input type='button' name='cercaPerCognome' class='cercaPerCognome' value='>' onClick='cercaPerCognome();'/> 
           </p>
            

<input type='text' id='pettorina' size=\"5\" /></p>
     </td>
     .....
il css è questo
codice:
   .cercaPerCognome:hover{
		font-size:18px;
	}
	.cercaPerCognome:active{
		font-size:16px;
	}