How to Link to Button Images in CSS

The "background-image" CSS property lets you link an image as the background for a button. This means that the image displays instead of the typical browser button you see when an image is not shown. You can use any JPG, GIF or PNG file for the button's background image. Before you make the button image changes, ensure that the image is located on your server.

Instructions

1. Right-click the HTML file that contains the button. Click "Open With," then click the HTML editor in the list of programs.

2. Create the button class. Copy and paste the following code to the HTML file, replacing the image name with your own:

   <script type="text/css">

   a.button {

   background-color: transparent;

   background-image: URL(button.gif);

   }

   </script>

3. Link the new CSS class to the HTML button. The following code is an example of a button that uses the background image set up in the CSS class:

   <input type="button" class="button">

4. Save the changes, and open the file in a Web browser. Review the button to verify the image loads on the button.

References

• Sophie G: Rollover Buttons & Icons with CSS