CSS Button with Random Counter

By Robert John Stevens, CEO of WriteExpress Corporation

Orabrush asked me to create a CSS button with both HTML and image text that changes color when hovered over and randomly increments a counter showing the number sold.

These examples could be improved by getting the date/time from a server.

CSS Button with Text and Hover Image

This CSS button was implemented as a class, so you can have many of them on the same page.

Notice the Buy Now is image text and the Number SOLD is static HTML text, or text that does not change.

1,614,285 SOLD

CSS Button implemented with an Id, with Text, Hover Image and Random Counter

Implemented with an Id you can only have one button per page. Notice it displays the number sold as a random counter.

CSS Buttons implemented as a class, with Text, Hover Image and Random Counter

Use a class when you have more than one Buy Now button on any page.

This article was commenced on November 22, 2011. Last update: November 28, 2011.

Ad by Google