Does anyone have any ideas on how to change how submit buttons can be changed from the default? I think it is a real shortcoming of HTML that onmouseup and onmousedown etc are not permitted with <input type='submit'.... I just feel there must be some clever way using javascript or something similar to give this effect.

btw, I have tried using the <button type="submit"... tag, <a href="Javascript:document.formName.submit()" ... tag, <img src ="pic.gif" ... tag, but cannot get them to work with my javascript validation routine.

Thanks, Dave.

Oh yes, I have been Googling for days, but I can't find anything that does what I want to do.

Member Avatar


get back to me if that link doesn't do what you need

Thanks ardev, but I had fonud this page earlier. The trouble is that you can't generate onmousedown and onmouseup actions with stylesheets, and that's the stumbling block for me.


a submit button 'onmousedown' is onsubmit in the parent <form>
a submit button has no 'onmouseup' because the form has already been submitted,

No, you're right, I really meant onmouseover and onmouseout.


use javascript code for that.

try it

make two image shaped as buttons and named them as icon1 and icon2 and apply this code

<script type="application/javascript">
function roll_over(img_name, img_src)
   document[img_name].src = img_src;

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
Member Avatar


What is it exactly that you're trying to do? Just change the look and feel or apply js functions to stop automatic submission?

The onsumbit could be used to run a js function, that if returned true proceeded the submit the form, but if false returned a message - is that it? Are you trying to validate the form before submitting it? If so there are loads of great scripts out there (YAV is a personal favourite).

button { background-color: #e4e0d8; } 
button:hover { background-color: #66cdaa; } 
button:active { background-color: #66cdaa;  } 
button:focus { background-color: #66cdaa; } 
form { PADDING: 1px; margin: 1px; }
img { border: 0px; }
input { background-color: #efefef; border: 0px; border-bottom: 1px solid #000000; }
input:hover { background-color: #dfdfdf; }
input:focus { background-color: #dfdfdf; border-bottom: 1px solid #101010; }
input:active { background-color: #dfdfdf; border-bottom: 1px solid #101010;}
input[type=button] { background-color: #e4e0d8;  }
input[type=button]:hover { background-color: #66aaaa; }
input[type=button]:focus { background-color: #66cdcc; }
input[type=button]:active { background-color: #66cdff; }
input[type=submit] { background-color: #e4e0d8;  }
input[type=submit]:hover { background-color: #66cdaa; }
input[type=submit]:focus { background-color: #66edea; }
input[type=submit]:active { background-color: #669d9a; }

snipped from my .css I dont use images slows down loading, here in rural dial up land, but css four state works for inputs

Hi Davewylie. Have you tried using css? You can easily format the submit buttons apart from using images

Member Avatar


Apparently not, I showed him a link (previous post) that was pure CSS (no JS) - not what he was after. AB's CSS is v. nice w/out images. Can't see why JS-less solution is not acceptable.

This what I am doing. I have 2 submit buttons, which send the user off to 2 different pages. But before sending them off, I do some validation using javascript, and the javascript needs to know which buton has been clicked, as the processing differs slightly. Fine so far, I can do this. But then I want to use 3-d image buttons instead of the the standard buttons, so that they match my other 3-d buttons. It looks odd having a row of odd buttons at the bottom of the page.


Member Avatar


So what's wrong with the CSS to design your buttons? You can do almostbob's or cssdrive's CSS - both work.

You want a hover, (possibly focus), active states - basic css. What else?

the javascript needs to know which buton has been clicked, as the processing differs slightly.

<script type='text/javascript'>
function validate(text) {
if (text=='process1' ) {/* do something*/}
else {/* do something else*/ }
<form onsubmit='validate("submitbtn");'>
<!-- bla bla -->
<input type='submit' name='submitbtn' value='process1'>
<input type='submit' name='submitbtn' value='process2'>

unchecked code, thought process only

Thanks guys, you've given me food for thought. I'll try playing around with CSS.


Be aware that hover in css on non anchor tags does not work well on all browsers. I had this problem with my last site.