Javascript-форум - Кнопки на сайте

Помогите с кнопками.(добавить в готовый код)
1. как сделать чтобы они не смещались с места, когда например наводишь на 3 кнопку и она округляется кнопки которые впереди нее сдвигаются и меняют форму немного. а мне нужно чтобы они оставались на месте. на равном расстоянии друг от друга.
2. как сделать кнопка, которая округляется при наведении еще замигала;
3. на первой кнопке после наведения увеличивается слово "здесь";
4. на второй кнопке скачет слово "нажми", увеличиваясь - уменьшаясь;
помогите пожалуйста.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Куклина Наталья</title>


<BODY background="http://elitefon.ru/pic/201211/1366x768/elitefon.ru-12512.jpg">


<center>
<script>
var chr = -1;
var txt = "ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА <br>на тему:<br>«Динамическое кодирование перцептивной информации»<br>студентки группы Од-351400-51<br> Куклиной Натальи Ивановны"
var l = txt.length
var p = " "

function changetext()
{
chr++;
t = document.all["text"].innerHTML
tt = t.substring(0,t.length-p.length)
if(txt.charAt(chr)!="<")
	{
	document.all["text"].innerHTML= tt + txt.charAt(chr) + p
	}
else
	{
	document.all["text"].innerHTML= tt + txt.substring(chr, chr+4) + p
	chr=chr+3
	}
setTimeout("changetext()", 80)
}

function str(num)
{
var s = ""
for(i=0; i<num; i++)
	{
	s = s + " "
	}
return s
}
</script>
</head>
<body onload="changetext()">
<div></div>
<p><font id="text" face="MS Sans Serif" size="6"></font></p>
</body>
</center>

<hr />


<table cellpadding="10" cellspacing="10" align="center" width="50%" height="50%">
<tr>
<center>
<style type="text/css">
#blink {
	-webkit-animation: blink 2s linear infinite; 
	animation: blink 2s linear infinite; 
	font-weight: bold; 
	color: color: #F00; 
}

@-webkit-keyframes blink { 
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; }
}

@keyframes blink {  
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; } 
}
</style>

<h1><p id="blink">Нажми на кнопки!</p></h1>
</center>
</tr>
<tr>
<td>
<form>
<button onClick="AlertButton()">Нажми здесь</button>
<style>
   button {
background: #2E8CE3;
padding: 7px 30px;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
border: solid 1px #73C8F0;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #73C2FD);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73C2FD), 
to(#2E8CE3));
box-shadow: inset 0 1px 0 0 #FFFFFF;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
	
button:hover { 
background: #2E69E3; 
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF), 
to(#2E69E3));
}

button:active {
background: #2E69E3; 
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF), 
to(#2E69E3));
box-shadow: inset 1px 1px 0 0 #004A7F;
-moz-box-shadow: inset 1px 1px 0 0 #004A7F;
-webkit-box-shadow: inset 1px 1px 0 0 #004A7F;
padding: 8px 29px 6px 31px;
}
</style>
<script>
function AlertButton()
{
window.alert("Надо всегда быть радостным. Если радость кончается, ищи, в чем ошибся. Л. Толстой");
}
</script>
</form>
</td>


<td>

<div class="quote">
<style>
.btn {	
height:30px;
border-color:#c2e254 #9bb838 #9bb838 #c2e254;
border-style:solid;
border-width:1px;
background:#6666CC;
cursor:pointer;
color: #FFFFFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


.btn:hover {	
border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;
border-style:solid;
border-width:1px;
background:#FFFF99;
color: #000000;
} 

.btn:focus {	
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
.btn:active {	
background:#FF99FF;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
</style>
<form>
	<input type="button" alt=""value="Нажми здесь" class="btn" onclick="javascript:window.location='index2.html'"/>    
</form>
</div>
</td>

<td>
<button class="changeForm" onclick="window.location='index2.html'">Нажми здесь</button>
<div class="quote">
<style>
.changeForm{
    padding:5px;
    background: #9933CC;
    border:1px solid #000;
    transition:all .5s;
    color:#fff;
}
.changeForm:hover, .changeForm:focus{
    padding:50px;
    background:#FF33CC;
    border-radius:100%;
    color:fff;
    outline:none;
}


</style>
</td>

<td>

<div id="imageWrapper" onclick="window.location='index2.html'">
<img id="backImage" src="12.png"/>
<img id="frontImage" src="11.png"/>
</div>

<style>
#imageWrapper {
display: inline-block;
width: 240px;
height: 240px;
position: relative;
}

#imageWrapper img {
width: 240px;
height: 240px;
position: absolute;
transition-property: opacity;
transition-duration: 0s;
transition-timing-function: linear;
}

#imageWrapper #frontImage, #imageWrapper:hover #backImage {
opacity: 1;
}

#imageWrapper:hover #frontImage, #imageWrapper #backImage {
opacity: 0;
}
</style>
</td>

</tr>
</table>

<hr />	

</html>