В теле дока можно написать простую кнопку:

В тэг “form” ставить параметр class=”z” бесполезно, он нужен для ссылки скорее всего.

Class=”z” – а под этим параметром, я спрятал вот такой вот код:

Этот CSS код, можно написать в голове дока, или в отдельном CSS файле:

input.z{font-size:22px;color:white; border-radius: 10px;width:62px;height:45px;background: url(http://vselennia.ucoz.ru/b/volk-5.jpg);}

input.z{
font: bold 14px Verdana, Arial, sans-serif;
text-decoration: none;
text-indent: 1px;
color: #FFFFCC;
background: url(http://vselennia.ucoz.ru/b/volk-5.jpg);
display: block;
width: 62px;
line-height: 22px;
height: 45px;
border-radius: 7px;
}

input.z:hover{
background-position: 0px -45px;
text-decoration: none;
color: #FFFFCC;
}

Короче, бреда тут много. Но в принципе красиво. В ИЕ правда, даже картиночка не меняется. А в мазиле благодаря тэгу “border-radius: 7px;” углы кнопочки скругляются. А в гуге и опере углы не скругляются, но картиночка меняется. Но в принципе, создаётся эффект прозрачности кнопки, что ли. Картинка становится её задним не подвижным фоном, а надпись “Ссылка на сайт” как бы становится написанной на кнопке и является подвижной. А так же, возникает еще один фокус. По скольку размеры кнопки твёрдо определены, то надпись “Ссылка на сайт”, естественно в неё полностью не поместиться. Но! Если навести на кнопку курсор мышки и нажать на неё, но не отпускать, то в некоторых случаях, эта надпись начнёт двигаться как в бегущей строке. В чём причина такого фокуса, я не знаю.
Если честно, мне просто тема показалась прикольной, и ава автора тоже. Вот и решил поделится своими наблюдениями. Надеюсь что, не сильно взбесил.