HTML text over images for buttons?

Question

I am designing my first website. I have designed a button image in gimp and saved it as a jpg. I want to use this button for my navigation buttons on the site. Should I make a separate image(jpeg) for each button or is it possible to just use one image and then overlay text on top of the images on the page using HTML? What's the best practice here?

Answer 1

Definitely reuse the images and overlay text. For ideas on how to do this, look at this tutorial:

Image button overlay text tutorial

Also, you mentioned using jpg. Consider using PNG instead for the button images, unless they are "real world" images. For simple gradients and solid colors, PNG is the way to go.

Answer 2

I havent seen the image but I generally try to Use CSS for as much of the graphical design as possible. Button generally tend to be very simple in design. However if you must use an image you can assign a background to a tag and then use text in the tag. Example would be to assign a background to a

<button class="myButtonClass">MyButtonText</button>

<style>
  .myButtonClass {
    //enter your button style here.
  }
</style>

Answer 3

Usually in this case you use just CSS by setting background property of elements that should be your navigation buttons.

For example you could have a ul:

<ul>
  <li><a href="link">Button1</a></li>
  <li><a href="link">Button2</a></li>
  <li><a href="link">Button3</a></li>
</ul>

and then just style it in you css by using background-image or similar styles, take a look here for some examples..

Answer 4

You're asking a question more about design than about coding. If you can implement your desired design by developing a single button background and then overlaying text in a standard font, do it! More broadly: don't put text in an image if you're just using a standard font.

On the other hand, if you want a fancy swirly font that can only be depicted in an image, you'll need to create a specialized image for each button with that button's text.

In that case, be sure to insert the image purely with CSS. Never, ever embed an <img /> tag with a textual button on a page.

Answer 5

Depends on how you've designed you site, as always theres loads of ways to do everything.

If your buttons are just static i would recommend using images, theres no harm doing it like this.

<a href="#" class="home"><span>Your button</span></a>

then you can use the css to set the image background.

.home{display:block; height:20px; width:40px; background:url(image.gif);}

and your also gonna need to hide the text in the span.

.home span{display:none;}

Theres no harm in using simple text either, most of the time its personal preference. Just leave ou the .home span{display:none;} and replace it with something to centre the text in the button.

As mentioned in another answer its also good practice to wrap your images in list items. Might sound wierd at first. But in practice its the best way.

Answer 6

you can put the image as backgroud...