1

I want to have a button with a gradient and an icon expressing the functional purpose of the button. Is this approach an adequate compromise of using HTML to achieve this requirement? Or is this bad misuse of HTML?

The decorator takes care of the button look and the icon selector displays the save icon.

span.button.decorator {
   background-image:url("gradient.png");
   background-repeat:repeat-x;
}

span.button.decorator input.icon {
    background-image:url("icon-sprite.png");
}

span.button.decorator input.icon_save {
    background-position: 0 1500px;
}

The CSS directives enhances the button with a gradient effect and also take care of the button icon.

<span class="button decorator">
   <input type="button" value="Save" class="icon icon_save" />
</span>

Are there better solutions? Thank you.

Learned about <button /> today. For further informations have a look into the stackoverflow question HTML - <button> vs. <input type="button" />.

Community
  • 1
  • 1
Christopher Klewes
  • 11,181
  • 18
  • 74
  • 102

1 Answers1

4

I'd use this as a starting point myself:

<button>
   <img alt="Save" src="save.png" />
</button>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • This is HTML5, right? We have to support some older browsers, so this doesn't seem to be possible. – Christopher Klewes Jan 13 '11 at 11:23
  • 3
    @codevour It's not. The `button` element is valid HTML4, and should, with exception of the behavior bug in IE, work cross browser – Yi Jiang Jan 13 '11 at 11:25
  • 1
    Since it the original was of `type="button"` and not `type="submit"`, I think the IE bugs are resolved with an explicit `type="button"` (or the JS can cancel the default behavior). – Quentin Jan 13 '11 at 11:31
  • 1
    If you're not relying on a name/value pair being generated by the button, then you shouldn't have to worry about the IE behaviour issues anyway – Gareth Jan 13 '11 at 11:31
  • I adjusted the question a little bit. I forgot to mention that I'm using sprites, how would you solve that with your approach David? – Christopher Klewes Jan 13 '11 at 11:33
  • 1
    I wouldn't use sprites for content images. If management insisted, I'd wrap the `` in a span and use that as the container for image replacement. – Quentin Jan 13 '11 at 11:37
  • I'll try to convince the managament using ` – Christopher Klewes Jan 13 '11 at 11:48