FreeGraphicsWorld

Help : Buttons

How do I go about labeling a button I downloaded?

There are two ways to do this:

• Use an image editor to label the button image

  You can use almost any image editor to do this, including Paint Shop Pro, Adobe Photoshop, and Windows Paint.

  1. Open up the button you downloaded in the image editor of your choice.
  2. Use your editor's text tool (usually a represented by a T icon) to write your text on the button.
  3. Save the image.

  Please note that you won't be able to edit the text later if you use this method.

• Use CSS and HTML to overlay your text on the image

  This is a bit more complicated than the other approach, but is a lot more flexible and lets you edit the button text at any time. If you're not familiar with CSS, please read this site for a very useful introduction to the subject.

  1. Insert the following CSS code in your stylesheet:

     a.mybutton
     {
     display: block;
     float: left;
     background-image: url('buttonimage.jpg');
     background-repeat: no-repeat;
     width: 100px;
     height: 30px;
     padding-top: 5px;
     text-align: center;
     }
     

     You will need to change the width and height values to match the dimensions of your button image. Use the padding-top value to vertically align your text label as needed.

  2. Whenever you want to use that button as a link, use the following HTML code:

     <a href="page.html" class="mybutton">Button Text</a>