CSS and HTML5: background image in buttons

Tweet

Would you like to do something like:

Or maybe you prefer it another way, like:

They look the same, don't they? However they are a bit different in the making. Let's see how...

The first way to do such thing is to use the <button> tag:

<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" />
</button>

The image is just like any text we usually put inside the tag.


Yet there's another way, which uses background-images in CSS. I personally believe that it is a better way of handling the button.
In the above examples, the first is an image (as you can see you can't click on it), while the second is live (it's an actual button you can click but that does nothing).

In order to do it the second way, we need to create a short style, like:

<style>
.btn {
height: 37px;
width: 37px;  
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png');
background-repeat:no-repeat;
}
</style>

And then, we need to insert our button (assigning the related class) where we want to:

<button class="btn"></button>

And that is all.

Short post, for very very busy days. See you next time!