Web Design Sprite Sheet Preload Graphics Tutorial

Learn to use sprite sheets to skin interactive elements in your software and web sites. First we will demonstrate how it works, then we will discuss the many benefits it provides at the end of the exercise.

<style>
body{ background: #444; }
.icons{
	background: url(images/icons.png);
	width: 50px;
	height: 50px;
	border: none;
	outline: none;
	cursor: pointer;
	margin: 10px;
}
#rss_btn{ background-position: 0px 0px; }
#rss_btn:hover{ background-position: 0px -50px; }
#rss_btn:active{ background-position: 0px -100px; }

#plus_btn{ background-position: -100px 0px; }
#plus_btn:hover{ background-position: -100px -50px; }
#plus_btn:active{ background-position: -100px -100px; }
</style>
<button id="rss_btn" class="icons"></button>
<button id="plus_btn" class="icons"></button>