Mostly CSS form button mouseovers

20060715184

While the default form styles may work for some audiences and designs, there are times when it is appropriate to have the fields and button match the site style. While you are at it, if all the links on the site have a hover state, why not give the form button a mouseover as well? Unfortunately, there aren’t any particularly great methods of doing this – using an anchor with sprite based CSS hovers + JS to submit the form makes it worthless for anyone without JS, styling an input button doesn’t work well and using image buttons require a preload to get the over state with multiple buttons requiring multiple preloads.

Enter the button tag

It’s probably debatable whether this is any better, but it is what I’ve been using lately. Rather than doing

<input type="submit" value="Go" />

to create the button, use the button tag instead:

<button type="submit">Go<button>

The button tag allows for additional styling in most graphical browsers (including Safari!) such as background images and various image replacement techniques (I like the negative text-indent, spans work as well). The following HTML and CSS makes a graphic button with a :hover state that with CSS turned off appears and functions as a default button. A single sprite based image is used for the background in different positions for normal and :hover states. Here’s an example.

#submitbtn {
  background: #333 url(bg_go.gif) 0 0 no-repeat;
  border: 0;
  cursor: pointer;
  display: block;
  height: 18px;
  padding: 0;
  margin: 0;
  text-indent: -9999px;
  width: 20px;
}

#submitbtn:hover { background-position:0 -22px; }

<form>
  <fieldset>
    <button name="submitbtn" id="submitbtn" type="submit" value="Go" title="Go">Go<button>
  </fieldset>
</form>

IE hates :hover

And if IE didn’t exist we’d be done. But since IE does exist and doesn’t :hover anything not wrapped in an anchor, an additional class and a bit of JS is needed.

#submitbtn:hover, #submitbtn.jshover { background-position:0 -22px; }

function addButtonHover() {
  if (!document.getElementsByTagName) return false;

  var buttons  = document.getElementsByTagName('button');

  if (buttons[0]) {
    for (var i = 0; i < buttons.length; i++){
      buttons[i].onmouseover  = function() { this.className += " jshover"; }
      buttons[i].onmouseout   = function() { this.className = this.className.replace("jshover",""); }
      buttons[i].onfocus      = function() { this.className += " jshover"; }
      buttons[i].onblur       = function() { this.className = this.className.replace("jshover",""); }
    }
  }
}

Attach with your preferred onload event handler and all buttons on the page will now have mouseover and focus states. Any number of buttons is possible on a page, each with their own id. Buttons can have additional classes assigned as well. Here’s the example again.

And the problems

• IE sends the value between the button open/close tags to the server, NOT the value attribute.
• As with other uses of image replacement, if CSS is on but images are off, the button will show up with no text on it but functionality intact.

Other than switching background positions, a transparent GIF and different background colors can be used for masking effects. Unfortunately due to IE’s handling of :hover, the JS is still necessary.

Comments

1. matches 20060717

   I’m confused. You’ve rearranged and you went to a baseball game?

2. jb 20060717

   i was thinking the EXACT SAME THING.

3. matches 20060927

   Now that I’ve seen this again, it’s a really interesting article. Good job.

---

Search WayTooCrowded