CODEWITHSUNDEEP
css
user669677
user669677

Reputation:

styling button and button:hover from transparent png

There is a button and it's style (background) is loaded form the same PNG image. Could somebody tell me how does it work?

example:

site - http://www.brushlovers.com/photoshop-brush/dotted-neon-lines.html

PNG - http://www.brushlovers.com/web/css/images/sprite.png

Thanks!

These properties are responsible for this?

width: 19px;
height: 20px;
background-position-x: -209px;
background-position-y: -80px;

Upvotes: 2

Views: 1420

Answers (1)

thirtydot
thirtydot

Reputation: 228182

They're using a technique known as CSS Sprites.

Here's a thorough explanation:

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Here's a tutorial specifically instructing how to make a button using this technique:

http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/

Upvotes: 4

Related Questions