Image of what the rest of the post is about:
(Excuse the rest of the site / styling, it’s the ASP.Net default one)
Well, I’ve been meaning to write this post for a while, it’s another one of my “if I don’t write this down somewhere I’ll forget it” entries, of which I need to write a couple more, but they can wait.
Please note that this is for ASP.Net web development and CSS (Cascading Style Sheets), so if you’re expecting some funny clips, film trailers, a sad litany of my latest injuries, or Hungarian donkey porn, you’ll have to wait 
As part of a project I’m working on, a requirement was to have buttons with small images next to them, similar to the MS Office buttons, or like the links in IE’s Favorites bar that have the favicon next to them. I seem to recall that you couldn’t (easily) add an image to a button, so I kinda cheated and used an ASP.Net LinkButtons. These are hyperlinks that can also have server-side events. The styling of the button was what I was after, not the plain text, so I set the LinkButton to render as a button, and added the following style declaration (via the LinkButton’s CssClass property).
<asp:LinkButton runat="server" ID="uxPrevL" CausesValidation="false" CssClass="button back" Text="Prev" OnClick="uxPrevB_Click" Visible="false" Width="75px">
As you can see, I’m adding two style classes, button and back. Note that I’m also setting the width of the button, this can also be done via CSS, or with ASP.Net theming.
Here’s another button:
<asp:LinkButton runat="server" ID="uxNextL" CssClass="button next" Text="Next" OnClick="uxNextB_Click">
As you can see, the style classes for this button are button and next. Here’s the style definition for button
.button
{
background-color: #ddd;
background-position: 5% 50%;
background-repeat: no-repeat;
border: 2px outset #ddd;
cursor: pointer;
display: inline-block;
margin: 5px;
padding: 5px 5px 5px 25px;
text-align: center;
text-decoration: none;
}
As you can see, we’re setting a few background properties, a border, a handy (ha ha) cursor to illustrate the button is clickable, making the element display as inline-block, setting margins and border and padding, and some text alignment gubbins.
The important part here is the background-position property. Whatever background we place on the button will be position 5% of the width in from the left and 50% vertically, or, technically speaking, nudged in a bit and slapped in the middle. I was slapped in my middle one, I didn’t like it…
Ok, let’s get those images declared – remember we’ve got two style classes being applied, so here’s the necessary declarations:
.back
{
background-image: url('../Images/back.png');
}
.next
{
background-image: url('../Images/next.png');
}
And that’s basically it – you just declare the (appropriately sized) images you want to appear on the button and through the CSS magic of “applying several styles”, it works – honest
I also changed the color of the button text when the mouse hovers over the button, and gave a faux “pressed in” appearance when they button was clicked via the following:
.button:hover
{
color: #000;
}
.button:active
{
border-style: inset;
}
The button was tested in IE7+ (forget you, IE6!) and FF3+, which were our target browsers, and should be ok on Mac browsers as well.
Let me know what you think, if you like 
