[vahrusha]

Вот тогда код поподробнее. Если кто-нибудь меня тыкнет носом, где я не прав, буду очень признателен.
HTML

<form id="form1" action="" method="post" accept-charset="utf-8">
  <div id="but1" class="but" onmouseover="mybut('but1', 1)" onmouseout="mybut('but1')" onmousedown="mybut('but1', 2)" onmouseup="mybut('but1', 1)" onclick="document.getElementById('form1').submit();">
    <input id="but1_ns" class="but" type="submit" value="войти" />
    <script type="text/javascript">jsbut('but1', 'войти');</script>
  </div>
</form>

CSS

.but{position:absolute;width:100px;height:26px;cursor:pointer}
.jsbut{width:100px;height:24px;padding-top:2px;background-image:url("_ima/but.gif");text-align:center;font-size:12px}

JS

function jsbut(elId, buttxt) {
  var newDiv = document.createElement('div');
  newDiv.className = 'jsbut';
  newDiv.id = elId + '_js';
  newDiv.innerHTML = buttxt;
  document.getElementById(elId).replaceChild(newDiv, document.getElementById('but1_ns'));
}

function mybut(elId, flag) {
  if (typeof flag == 'undefined') {flag = 0};
  var elem = document.getElementById(elId + '_js').style;
  switch (flag) {
    case 0: elem.backgroundImage = 'url("_ima/but.gif")'; break;
    case 1: elem.backgroundImage = 'url("_ima/but1.gif")'; elem.height = '24px'; elem.paddingTop = '2px'; break;
    case 2: elem.backgroundImage = 'url("_ima/but2.gif")'; elem.height = '23px'; elem.paddingTop = '3px';
  }
}