View Full Version : Keep XP button style while adding background image

08-12-2005, 11:05 PM
Hi guys,

I have a few buttons on my website and when using 'value="text"', the buttons appear in the default XP style (with the nice shadow and yellow mouseover effect). Now I want to add an icon to the button that should appear left of the text. I used the following style properties for this: <input type="button" value="Save" style="background: url(icons/save.gif) no-repeat; padding-left: 10px" />.

Now the problem is, that while adding additional style to a button, the XP style completely dissapears and the button looks like the buttons originally did in older browsers.

Is there a way to add an icon to a button, without loosing the nice XP look?

Thanks in advance,

Cheers, Michiel

08-12-2005, 11:14 PM
Try the button element (http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.5), it accepts content like an <img> between the opening and closing tags.

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

08-12-2005, 11:31 PM
Hi mcdougals4all,

thanx for your quick reply! I now use the following: '<button type="button" value="Save"><img src="icons/save.gif" /> Save</button>'. With some additional styling, this appears to be working just fine!

Cheers, Michiel

08-12-2005, 11:58 PM
Your welcome. :thumbsup:

08-22-2005, 11:43 AM

I'm dealing with the same problem described above. Could you give an example of the style you used on <button type="button".... > in order to make it look like XP buttons do ? please, I really need this feature.

Thanks in advance!

08-27-2005, 12:32 PM
Hi dandrei,

sorry for my delayed response. Underneath you'll find the html and css I use to get a button look like an XP button.

<style type="text/css">
button {
margin-left: 5px;
margin-right: 5px;
width: 115px;
text-align: left;
font-family: arial;
font-size: 11px;

button img {
margin-left: 1px;
margin-right: 10px;
float: left;

<button type="button"><img src="icons/save.gif" /> Save changes</button>

Hope that works for you too!

Cheers, Michiel

08-27-2005, 05:30 PM
http://www.huntingground.net has some information about changing the XP style button and examples and it may give you some help about doing that.

Hope this helps,