Buttons navigation menu with CSS Sprites

Published by TheJoe on

Estimated reading time: 2 minutes


This article was published more than a year ago, there may have been developments.
Please take this into account.

In today's tutorial we talk again about HTML graphics and CSS integration. In my article a few months ago I talked about the technical (also widely used by Google) of CSS sprites. In practice consists in inserting the majority of images repeated several times within the page into one big image, that will be called multiple times with our CSS.

As a matter of personal preference I tend to avoid using Gimp every time I have to create a different menu item navigation, I prefer to create only the backgrounds of buttons and then think about the styles using CSS. In this way, the first menu is better indexed by search engines, secondly I avoid “waste” the time to create me to every button a new image.

That of CSS sprites is a technique well-established, that not only speeds up page load, but increases the compatibility on different browsers.

Today we see how to create a simple, As appealing navigation menu with this technique. What follows is the result.

We start by creating the “skeleton” of our menu in an HTML page.

  <link href="style.css" rel="stylesheet" type="text/css" />
    <a href="#" class="button">Info</a>
    <a href="#" class="button">About Us</a>
    <a href="#" class="button">Contact us ...</a>

As you can see I have already called a CSS file called external “style.css“.

Now we can create the background for our button. The following (who in lato) is what I have adopted, the larger 550%. The actual sizes are 2px di larghezza x 56px height. Although it is not easy to notice it is a file vertically divided in half; the upper one will be the one normally visible, the lower will be loaded on mouseover. For both half I used a gradient with different colors, but we see better now.

Look here:  CSSDeck: many ideas from web design professionals

Once created our “sprite” we'll call him back inside the CSS.

a.button {
	float: left;
	padding: 5px 10px;
	border: 1px solid #c96111;
	background: #e2721b url(images/button_sprites.png) repeat-x 0 0;	
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	font-family:'Hoefler Text',Constantia,Cambria,Georgia,serif;
	line-height: 20px;	
	color: #fff;	
a.button:hover {
	border: 1px solid #2f4c13;
	background: #4a781d url(images/button_sprites.png) repeat-x 0 -30px;

The lines that we are interested in the #6 e la #16: the voci “background”. As you can see the image file is called only one: “button_sprites.png” with different coordinates. I set the repetition in horizontal and a background for both cases.

The rest of the instruction does nothing but add a border of a darker pixel depending on whether the mouse is over the button or elsewhere. I also set font size and specific.

The result is simple but attractive, with a touch of glossy.


I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.


Apache 72 · 13 August 2012 at 10:11 AM

I wanted to do to speed up a little’ the site, the pictures are not so many as it seems, the problem is that I do not have section with id "container" them.
so before you come across you wonder if you can do anyway

    TheJoe · 13 August 2012 at 10:58 AM

    To be able to do you can do, but if you do not know what a “id” perhaps it is better that before you practice a bit '. 😉

    However, you should keep an eye on this blog, probably in the next article I will publish a short tutorial that will definitely affect.

Apache 72 · 13 August 2012 at 7:57 AM

I used css generator and got the codes for a single image CSS Spriter.
How do I now put it to the site?
I uploaded the new image obtained by Spriter in css …/miotema / images, where there are also other.
now in the style sheet css generator tells me to enter

#container li { background: url(csg-50289151dcb6a.png) no-repeat top left; }

and css rules for images.

the question is:
in my css sheet, there are several sections that address various background images (I have assembled), on separate lines and not in one richicamo , then how should I do?

    TheJoe · 13 August 2012 at 8:44 AM

    I see that the theme of the website (if this is the site that you linked) is very complex, can be long and frustrating improvise designer with an issue as complicated. Having said this,, if you really want to try your hand, we go to practice.

    I do not like solutions such as automatic generators, However, the rules for the inclusion of a sprite are always the same.

    0_ (optional) create a backup copy before you begin. It could save your life,
    1_ Upload the images in the directory of… precisely of the images,
    2_ Upload the new css in the root directory of the… precisely the css,
    3_ Check that the css refer to pictures and not absolute paths,
    4_ Include the new css section “head” Site,
    5_ Check that there are no instructions in the different css not conflict with each other,
    6_ Load all online.

    In your case, make sure you have a section with id “container” which has in its interior a list “li”. Only in this way can work css rule. If there are conflicts then you must assign a “id” or “classroom” different at each respective tag. This may sound easy, but most of the time is a long job that the first few times also involves a considerable loss of time. I suggest you get help from someone who knows how to work with css, or to give as much time as you can, because the problem can not be solved with a comment on the article. 🙂

Leave a Reply

Avatar placeholder

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.