Create a Button with Hover and Active States using CSS Sprites – Inspect Element – Web Design & Development Blog

Create a Button with Hover and Active States using CSS Sprites

The CSS Code

Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.

The static, initial state of the button is defined in CSS as follows:

a.button {
	background: url(../images/button.png) no-repeat 0 0;
	width: 186px;
	height: 52px;
	display: block;
	text-indent: -9999px;

The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.

Hover State CSS

The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:

a.button:hover { background-position: 0 -52px; }

Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.

Click State CSS

As you can probably guess the click state will basically be the same but moving the button up again as follows:

a.button:active { background-position: 0 -104px; }

Thank you

via Create a Button with Hover and Active States using CSS Sprites – Inspect Element – Web Design & Development Blog.

10 Popular jQuery Plugins for 2010

10 Popular jQuery Plugins for 2010

jQuery Before/After

This plug-in shows the difference between two images simply dragging a slider over the two images which are sandwiched with one on top of the other. The final effect is really nice and easy to implement.

Take a look at this plug-in here. For the demos here.

Sunday Morning

Sunday Morning is a jQuery plugin which allows site-owner to offer their visitors some easy and fancy ways to translate their content in more then 30 languages.


jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices. Absolutely to have if you are a mobile developer.

CJ Image Video Previewer

CJ Image Video Previewer is meant to mimic the video preview boxes you see on many Video sites. It displays a block that contains an image thumbnail and when the user moves their cursor of the box, it dynamically loads and then displays a group of images in sequence. Kind of like a flip-book. This is an excellent way to provide an preview of the video, without the user actually downloading the video file.


Autosave is a flexible autosave plugin for jQuery. If yo want to autosave a form use this simple code:


The jQuery MapBox plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from being able to zoom in and pan to get a better view.

Ajax Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries.

Infinite Scroll

Infinite Scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page. This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience (with this plug-in you can implement easily a navigation experience).

jQuery Tools

jQuery Tools isn’t a plug-in but is a collection of the most important user-interface components for today’s websites (tabs, tooltips, overlay, drag-and-drop, exposé, scrollable, …).

jQuery lightBox

jQuery lightBox is probably one of the most popular an easy to implement jQuery light-box. This plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery’s selector.

Artisteer Affiliate Program

Artisteer Affiliate Program

Become an affiliate of one of the best emerging software products

By promoting Artisteer to your website visitors and subscribers you become our partner and earn lucrative commissions on Artisteer sales you generate.


Highly convertible banners tested and updated by our team. Custom banners available to active affiliates.

Earn up to $45 sale commission on Artisteer Standard Edition.

Great Product – Software Product of 2008.

No limit – There’s no limit on the commissions you earn.

90 Return Days – You get credit for all sales in the first 90 days from the time that customer first arrives.

Program co-managed by LinkShare for proven sales tracking and payment management.

via Artisteer Affiliate Program.