Pretty form buttons with CSS

[Fallen Angel]

Not particularly liking the standard 'submit' and 'reset' buttons I recently decided to add image buttons on a site I've just finished. I wanted a rollover effect on the buttons, so of course that meant a little bit of javascript. No problem, I can live with a bit of well placed js where it's useful...the only problem was that while I was still feeling pretty pleased with my new pretty page, I realised that I had a major accessibility problem because if javascript wasn't enabled then precisely nothing would happen when the buttons were pressed....

...enter the lovely pure CSS (nearly) image button rollover! 

This is the (x)html:

Code:

<form method="post" action="" class="contactForm">
    <fieldset>
  <label for="txtInp_txt_name_id0">Name:</label><br />
<input type="text" id="txtInp_txt_name_id0" name="txt_name" alt="Enter your name here" title="Text input: Name" size="50" /><span class="required"> * required</span> <br />
<label for="txtInp_txt_email_id0">Email:</label><br />
<input type="text" id="txtInp_txt_email_id0" name="txt_email" alt="Enter your email address here (required)" title="Text input: Email (required)" size="50" /><span class="required"> * required</span><br />
<label for="txtAr_textarea_enquiry_id0">Your message:</label><br />
<textarea id="txtAr_textarea_enquiry_id0" name="textarea_enquiry" cols="35" rows="6" title="Textarea: your enquiry"></textarea><br />

   <!-- this is the clever bit with the button -->
        <p style="display: none;"><input alt="Send the form" class="send-btn" type="submit" value="Send the form" src="btn.gif" /></p>
<p><input alt="Send the form" class="send-btn" type="image" src="btn.gif" onmouseover='this.classname=on' onmouseout='this.classname=off' /></p>

        <p><a href="" type="reset">Clear the form</a></p>
</fieldset>
</form>

And here's the CSS:

Code:

input.send-btn {
width: 127px;
height: 22px;
background: #F7F7F7 url(sendbutton.gif) no-repeat;
border: 0;
outline: none;
}
input.send-btn:hover {
background: #F7F7F7 url(sendbutton.gif) no-repeat 0 -22px;
border: 0;
}

.on {background: url(clear_hover.gif);}
.off {background: url(clear_normal.gif);}

and here's a basic form using the technique.

Of course the only problem with this method is that an input type "image" will always submit a form, so you need to use a workaround or a hyperlink (I stuck with the hyperlink because I was using this method precisely to get away from relying on javascript, so I didn't want to reintroduce more). There's also a problem in that you don't get the rollover on naughty < IE7 because it doesn't recognise the :hover attribute, but using the little snippet of js that doesn't affect the submission of the form gets round the problem.

This is the site where I got the code from, which also explains how the technique works.

[rdouglass]

I liked the look of your button a lot but it didn't do anything on 'hover' in IE 6.  Is it supposed to?  I'd love to be able to use nice buttons with no JS as well.

[Fallen Angel]

Yup, sorry my bad.

That'll teach me to post code without checking it first in the relevant browser (works fine on this machine in IE7 but didn't try it on IE6 on the other - duh!). The js was a bit of a red herring - there is a way of getting it to work but it's late and my head doesn't do bug hunting this late.

The CSS way of doing it though is to wrap the 'input' tag with a link tag:

Code:

<p><a href=""><input alt="Send the form" class="send-btn" type="image" id="thebutton" src="btn.gif" /></a></p>

and add into the CSS for IE's benefit:

Code:

a:hover input.send-btn { background: #F7F7F7 url(sendbutton.gif) no-repeat 0 -22px;}

Revised example here.

[rdouglass]

I like the look of the button a lot but I don't think I like the action for the hover.  It just seems it shouldn't change unless I click on it.  That is what I expect buttons to do and it just seems 'different'.

But I guess to do this without JS, that's probably the only way.

CSS doesn't have a 'click' event does it? 

[Fallen Angel]

You know until you mentioned it just now that had never ocurred to me. It does feel 'different'. I've just had a quick look at the CSS3 draft specs and it doesn't look like CSS3 has an onclick event either. I guess that means we're stuck with js if we want a true 'only change when you press the button' one. 

I think I might use it on a project I'm just starting though where I want a hover effect on the nav I'm using, but the nav isn't 'buttons' - I think I could probably get away with it not feeling quite right in that context rather than using a js image swap, and if it feels like it needs an onclick, resort to using a little js just for that.

[Fallen Angel]

I like the look of the button a lot but I don't think I like the action for the hover.  It just seems it shouldn't change unless I click on it.  That is what I expect buttons to do and it just seems 'different'.

But I guess to do this without JS, that's probably the only way.

CSS doesn't have a 'click' event does it? 

I knew there was someything I'd forgotten (and thanks to Tailslide for reminding me) - you can get a kind of 'click' event - at least in some 'good' browsers (i.e. not IE) at least it seems - new example here.

I changed the image to have three states - the normal state, a hover state, and the pressed state:


...which meant adding an extra CSS rule

Code:

input.send-btn {
width: 129px;
height: 22px;
background: #F7F7F7 url(sendbutton2.gif) no-repeat;
border: 0;
outline: none; }

input.send-btn:hover {
background: #F7F7F7 url(sendbutton2.gif) no-repeat 0 -22px;
border: 0; }

input.send-btn:active {
background: #F7F7F7 url(sendbutton2.gif) no-repeat 0 -44px;
border: 0; }

a:hover input.send-btn { background: #F7F7F7 url(sendbutton2.gif) no-repeat 0 -22px;}
a:active input.send-btn {background: #F7F7F7 url(sendbutton2.gif) no-repeat 0 -44px;}

It works in Firefox and Opera - but in Mozilla it's not playing nice, and in Netscape, and of course IE it's not working. It looks like if you want it to work cross browser, JS is the only way to go. 

[rdouglass]

So I'm still lookin' at this one and have a Q.  So does FF deem the element active when it's clicked hence uses the different top position? (0, -22, and -44)?  If so, have you tried this with IE 7?

Quite curious actually since I like the looks of these buttons and would like to use this technique if I cana get it to work in IE.  Don't wanna' use JS but it may be the only option.  If I test for IE first anyways...

[Fallen Angel]

Sorry, I didn't explain that very well - yes FF considers it active when it's clicked, hence the different positions. I've tried it with IE7, and unfortunately it's not working in any version of IE  I'm not sure why, because IE should recognise the :active pseudo-class. IE only supports :active and :hover on links (hence wrapping the <input> tag in the link, so it should work in theory AFAICS. 

I refuse to be beaten though, and I keep playing about with it in the hope I can get it to play nice in IE. I'll let you know if I come up with anything useful.

[Fallen Angel]

Update on the pretty buttons situation: I've now changed the code I'm using and it's working nicely in everything but IE! Typical! Being a stubborn cow, although this morning I had a vague notion of going back to using just the standard sh1te buttons, I've spent the day scouring the web for useful leads and I think I've tried just about input method there is, every conceivable hack, and spent the best part of the day muttering obcenities at the screen, and have consequently got bugger all useful work done! 

I shall not be beaten though (I think I mentioned I'm a stubborn cow didn't I?  )....the mission continues....