Adding images to XHTML buttons

Tags: CSS, XHTMLSaturday, 06 September 2008

A few people have asked me how to produce an XHTML submit button containing both text and an image. There isn't really all that much to it, just a bit of XHTML and some CSS to make the button pretty, so I've written up a "How to guide" outlining the steps I followed to create one.

XHTML

First off we need a standard XHTML submit button. This can be created with the following line of XHTML. I have given this button an id of search-submit so that we can identify it later.

<input type="submit" id="search-submit" />
Figure 1:
Default submit button.

This produces the button. Note that different web browsers render the default appearance of buttons differently, as shown in Figure 2 below.

Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Figure 2:
Default submit button appearance.

Next we wanted the text displayed on the button the read "Search". This is accomplished by adding the value attribute to the input tag.

<input type="submit" id="search-submit" value="Search"/>
Figure 3:
Submit button showing the text "Search".
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Figure 4:
Demonstrates how the Search button appears on screen.

On the XHTML front that is about all there is to it. Of course to make the button actually do something you would need to have it contained within a form that is associated with an action, but for the purposes of this guide simply displaying the button is sufficient.

Image

Next we need an image to add to the button. The image can be in any graphical format that can be understood by a web browser, including *.gif, *.jpg, or *.png.

The image should be sized appropriately for the button you are wanting to associate it with. In this case I have created a 15 pixel by 15 pixel image of a magnifying glass.

Search image
Figure 5:
Image to be used on the button.

CSS

The Cascading Style Sheet (CSS) is where we pretty up the rather dull looking default appearance of the button.

Earlier I named the button search-submit. In the CSS I can refer to the button we are working on by that name, ensuring I put a hash symbol # in the front to tell the browser I will be using the id of the object to refer to it.

First off I am going to set the background colour of the button the be the same shade of grey that I have used as the background of the magnifying glass image. I am also going to align the text on the button to the right so that there will be space to the left of the text for the image.

#search-submit
{
   background:                     #DDDDDD;
   color:                          #666666;
   text-align:                     right;
}
Figure 6:
Initial CSS styling of button before image is added.
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Figure 7:
Shows how the button now renders in the browser.

Next I want to add the image to the button. I only want the image to appear once, aligned horizontally to the left and vertically in the centre of the button.

#search-submit
{
   background:                     #DDDDDD url(magnifying_glass.png) no-repeat scroll left center;
   color:                          #666666;
   text-align:                     right;
}
Figure 8:
Added the image to the background of the button.
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Figure 9:
Shows how the button with the image added.

The picture is now visible, but as you can see the button still doesn't look all that visually appealing. Lets add some borders to give it a three dimensional fee, and set the width so that it is wide enough to hold both the text and the image without there being an overlap.

#search-submit
{
   background:                     #DDDDDD url(magnifying_glass.png) no-repeat scroll left center;
   border-bottom:                  1px solid #666666;
   border-left:                    1px solid #EEEEEE;
   border-right:                   1px solid #666666;
   border-top:                     1px solid #EEEEEE;
   text-align:                     right;
   width:                          7.5em;
}
Figure 10:
The style sheet with stylised borders and a refined width.
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Figure 11:
Gives us a view of how the button is now appearing.

The button is starting to look good with both the image and text visible and some borders to help it stand out from the background. A bit of padding around the elements will help with the appearance, as will choosing a font that renders well on the screen. Lastly we'll transform the text to uppercase to help the button appear more evenly balanced.

#search-submit
{
   background:                     #DDDDDD url(magnifying_glass.png) no-repeat scroll left center;
   border-bottom:                  1px solid #666666;
   border-left:                    1px solid #EEEEEE;
   border-right:                   1px solid #666666;
   border-top:                     1px solid #EEEEEE;
   color:                          #666666;
   font-family:                    verdana, arial, sans-serif;
   font-size:                      1em;
   padding:                        3px 3px 2px 15px;
   text-align:                     right;
   text-transform:                 uppercase;
   width:                          7.5em;
}
Figure 12:
The finished product.
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Apple Safari Firefox Microsoft Internet Explorer Netscape Navigator Opera
Figure 13:
Shows how the last step in the refinement process displays the button.

It is worth noting that different browsers render margins, padding, and borders differently. If you want your buttons to display consistently across a variety of browsers you may need to play around with these settings as well as the height and width properties in order to achieve an outcome that is acceptable to you.

Some designers use hacks and non standard compliant tweaks to try and make their web pages appear pixel perfect across multiple browsers. These can result in unexpected behaviours when alternative browsers, or different versions (be they older or newer) of the intended browsers, view the page. It also means there will likely be a quite a bit more support and maintenance required as time goes by to continue to produce the desired results. Personally I take the point of view that your design should be flexible enough to look good in all your targeted browsers, but that it doesn't need to be identical in all browsers.