Keep XP button style while adding background image

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

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.

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

Your welcome. :thumbsup:

hello!

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!

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;
}
-->
</style>


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



Hope that works for you too!

Cheers, Michiel

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,
MW2005