Помогите с кнопками.(добавить в готовый код)
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>
