Question

I want to know how I can change a normal default grey HTML button into an image using CSS.

This is the image I want to change into:

button.star {
    background-image: url(img/star.jpg); 
}

This is the image I’m using. It’s for favoriting an item. Thanks 🙂

Is this the way to do it?

Answer 1

That’s just some random image from imgur, but basic concept. If there’s no content in the button make sure you set the height/width otherwise it won’t stretch to fit the button.

As a background

button {
    background: url('http://imgur.com/I0EwG.png') transparent;
    height: 48px;
    width: 45px;
    border: none;
}​

http://jsfiddle.net/robert/Wzu2S/

In the button

HTML

<button><img src='http://imgur.com/I0EwG.png' /></button>​​​​​​​​​​​​​

CSS

button {
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

http://jsfiddle.net/robert/DjYmR/