Tag Archives: CSS

Image buttons made simple

I read a blog post recently showing how to create a button with an image and text. The button looked very simple and very nice to look at, but the HTML was more complicated than I thought it needed to be.

There is a move now to make the HTML of a document as simple and self-explanatory as possible. The HTML should contain the intent of the page, CSS (and possibly JavaScript) is then used “skin” the page as required. This has become more feasible now that browsers are finally maturing and supporting more and more of the CSS standard.

So, if we want a button, we should use the <button>…</button> tag. If we want to have an add button, we want to have:

<button class="imageButton add" 
       onclick="addSomething(); return false;">Add Something</button>

And instead of this

we want it to look like this:


Continue reading Image buttons made simple