Change a CSS button into a star image?

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

It is indeed :)

background-image will happily take a url() statement. If you have a bunch of background properties they can be condensed into just one background clause.

Eg.
background-image: url('img/img.png'); background-repeat: no-repeat; background-color: #5500ff;
would turn into
background: url('img/img.png') no-repeat #5500ff;

Answer 2

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/

Answer 3

Why button.star if it's a <input> tag ??

Answer 4

Your selector is wrong.

button.star means an element of type button with a className of star

I suggest you try

#star {
  /* styles */
}

or

input#star {
  /* styles */
}

or just use the button element instead of input. Make sure you make it type="button" so the form will not post in IE.