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.

CSS: button generators

Tweet

Ever needed to create buttons in pure CSS?
The following is a list of the best on-line CSS code generators available.
This time is an easy post, but, as you may understand, I do need a break sometimes.
Enter and enjoy the list!

jQuery: Simple Fixed Previous & Next Buttons

Tweet

The following article has been kindly submitted by Ben Rogerson. It shows a simple way of creating Previous & Next buttons with a short jQuery snippet and some CSS. I hope you like it!
 
Here's a simple little usability update you can quickly apply to your existing blog or results pages.

It will allow users that have a slightly larger running resolution to lessen the time taken to find the 'next page' and 'previous page' buttons which are normally at the bottom of your page.

The first task is to make sure your existing previous and next buttons at the bottom of the page have a class or id attached to them. This is so we can easily target them for replication.