Each file that must be loaded in the page means a request to the server and a waiting for response, so, if you have a menu with 5 links with images, to make the page loads faster, it is better to use a single image file to style the links, not 15 files (5 * 3).
This tutorial shows you how to style link buttons using a Single Image and CSS, for all the three conditions of a button /link: normal, hover, and active (when it is clicked). Also, how to use a single image file for all the links of a menu.

It is simple, the idea is to have the pictures for the 3 conditions of the button symmetrically positioned on the image, vertically: top, center, bottom; or horisontally: left, center, right. It is indicated to have the height of image (or width, deppends on how you arrange the pictures, vertically or horisontally) to can be divided exactly to 3.
Then, in CSS set the width and height of the link the same size as the width and height of the button in the image.


• If the conditions of the button (for normal, hover, active) are vertically positioned in the image, like this:
vertical image button
Set the CSS property background-position with these pairs of values: 0, 0; 0, 50%; and 0, 100% (or: top, center, bottom); for each condition (normal, hover, active). Using percentage values​​, provides a better control of positioning.
- Here's an example (the image width is 125 pixels, the height is 120 pixels; with the buttons drawed vertically. The height of the link /button is 40px):
<style>
#addnew {
 width: 125px;
 height: 40px;
 display: block;
 background: url('css/button_img1.gif');
 background-position: 0 0;
 background-repeat: no-repeat;
 border: none;
 text-indent: -9999px; /* To not show the text-link */
}

/* When the mouse-cursor is over the button */
#addnew:hover {
 background-position: 0 50%;
}

/* When the the button /link is clicked */
#addnew:active {
 background-position: 0 100%;
}
</style>

<h4>Example link /button using single image and CSS</h4>
<p>The states of button use this image: 
 <img src='css/button_img1.gif' alt='vertical image button' width='125' height='120' /><br><br>
 - Position the mouse over the button, then keep the button clicked to see the 'active' condition</p>

<a href='https://coursesweb.net/' title='Web Programming Courses' id='addnew'>CoursesWeb.net</a>
• If the conditions of the button (for normal, hover, active) are horisontally positioned in the image, like this:
horisontal image button
- Set the CSS property background-position with these values: 0, 0; 50% 0; and 100% 0 (or: left, center, right); for each condition (normal, hover, active).
- Here's an example (with the buttons drawn horizontally):
<style>
#addnew {
 width: 125px;
 height: 40px;
 display: block;
 background: url('css/button_img2.gif');
 background-position: 0 0;
 background-repeat: no-repeat;
 text-indent: -9999px; /* To not show the text-link */
}

/* When the mouse-cursor is over the button */
#addnew:hover {
 background-position: 50% 0;
}

/* When the the button /link is clicked */
#addnew:active {
 background-position: 100% 0;
}
</style>

<h4>Example link /button using single image and CSS</h4>
<p>The states of button use this image: 
 <img src='css/button_img2.gif' alt='vertical image button' width='464' height='40' /><br><br>
 - Position the mouse over the button, then keep the button clicked to see the 'active' condition</p>

<a href='https://coursesweb.net/' title='Web Programming Courses' id='addnew'>CoursesWeb.net</a>
In the same way you can use a single image to style a menu with multiple links. The trick is to draw the buttons symmetrically in the image, then to define the CSS background-position property according to the position of the buttons in the image, using percentages representing the distance from the upper-left corner, the pair of values: left, top (it can be needed to test various values till you get the best display of each buttons). Using percentage values​​, provides a better control of positioning.
- Here's an example, a meniu with 4 links, using this image:
image for buttons
<style>
 /* Sets the image for buttons in links and common properties for all links in #menu */
#menu a {
 width: 125px;
 height: 40px;
 display: block;
 background: url('css/buttons.gif');
 background-repeat: no-repeat;
 text-indent: -9999px; /* To not show the text-link */
}

 /* The button from image for First link */
#menu #addnew {
 background-position: 0 0;
}
 /* First link hover */
#menu #addnew:hover {
 background-position: 48% 0;
}
 /* First link clicked */
#menu #addnew:active {
 background-position: 100% 0;
}

 /* The button from image for Second link */
#menu #delete {
 background-position: 0 32%;
}
 /* Second link hover */
#menu #delete:hover {
 background-position: 48% 32%;
}
 /* Second link clicked */
#menu #delete:active {
 background-position: 100% 32%;
}

 /* The button from image for Third link */
#menu #accept {
 background-position: 0 66%;
}
 /* Third link hover */
#menu #accept:hover {
 background-position: 48% 66%;
}
 /* Third link clicked */
#menu #accept:active {
 background-position: 100% 66%;
}

 /* The button from image for Fourth link */
#menu #cancel {
 background-position: 0 99%;
}
 /* Fourth link hover */
#menu #cancel:hover {
 background-position: 48% 99%;
}
 /* Fourth link clicked */
#menu #cancel:active {
 background-position: 100% 99%;
}
</style>

<h4>Example single image for multiple buttons</h4>
<p> - Position the mouse over the button, then keep the button clicked to see the 'active' condition</p>

<nav id='menu'>
 <a href='#' title='Add New' id='addnew'>Add New</a>
 <a href='#' title='Delete' id='delete'>Delete</a>
 <a href='#' title='Accept' id='accept'>Accept</a>
 <a href='#' title='Cancel' id='cancel'>Cancel</a>
</nav>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Styling link buttons using a Single Image and CSS

Last accessed pages

  1. Tabs effect with CSS (27923)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (34518)
  3. PHP getElementById and getElementsByTagName (32806)
  4. Sending data with GET and POST in the same request (4718)
  5. Dynamic variables in JavaScript (11026)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1320)
  2. Contact page - CoursesWeb (1290)
  3. Tabs effect with CSS (1288)
  4. PHP getElementById and getElementsByTagName (588)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (488)