The unfortunate forgery of this article has been removed from the the Internets. Yay! The victory is ours!

UPDATE 13.09.2007.

Due to great demand, now you can download all files in 1 zip file

VISTA_toolbar.zip (20.36 kb)

I want to show you what you can do with a minimal effort and a little imagination. Here's a screenshoot from Windows VISTA. We'll try to reproduce that toolbar, with buttons and hover effect in cross-browser compatible CSS and HTML.

Screenshoot from Windows VISTA

Our toolbar with few line of css and html. Click to see live demo

Toolbar

We'll define toolbar as user list tag -> <ul>. <ul> tag will be in #vista_toolbar <div> tag. Each <li> element will be toolbar button. So when you need a new button you just add new <li> tag, hmmm I just love CSS! Here's how it looks in HTML

<div id="vista_toolbar">

<ul>

            <li>...</li>

      </ul>

</div>

Ok, lets define CSS for this elements

First <div id="vista_toolbar">

#vista_toolbar {

float:left;

font:normal 12px 'Trebuchet MS','Arial';

margin:0;

padding:0;

}

It's straightforward.

<ul> element CSS

#vista_toolbar ul {

background-image:url(back.gif);

background-repeat:repeat-x;

float:left;

line-height:32px;

list-style:none;

margin:0;

padding:0 10px 0 10px;

width:500px;

}

Height of toobar define with „line-height:32px;“ and width with „width:500px;“. And 10 px padding because we don't want to start with buttons from beggining of toolbar.

<li> element CSS

#vista_toolbar li {

display:inline;

padding:0;

}

Display „inline“ because we want our buttons to be displayed in row.

Buttons.

How to create a button? It's simple, we will use Sliding doors technique.

Just crop picture of button.

left.png

right.png

we'll add this picture on a:hover in CSS and it works in IE6 as well. Let's go!

HTML code of button

<li>

<a href="#">

<span>Add New</span>

</a>

</li>

If you want add picture next to text just add <img align="left" src="files/add.gif" alt="add new" /> in <span> tab

Example HTML code for button with image:

<li>

<a href="#">

<span>

<img align="left" src="files/add.gif" alt="add new"/>Add New

</span>

</a>

</li>

Put it in work with CSS

#vista_toolbar a {

color:#FFF

float:left;

padding:0 3px 0 3px;

text-decoration:none;

}

Color property is defined because we need to override default link color with white color and also text-decoration.

#vista_toolbar a span {

display:block;

float:none;

padding:0 10px 0 7px;

}

#vista_toolbar a span img {

border:none;

margin:8px 4px 0 0;

}

If we have image next to text we must center her vertical with margins.

Here is a CSS code used to make hover effect

#vista_toolbar a:hover{

background: url(left.png) no-repeat left center;

}

#vista_toolbar a:hover span {

background:url(right.png) no-repeat right center;

}

Cross-browser compatibility?

Tested in: Firefox 2, IE 6, IE 7, Opera 9.2, Safari 3.0.3 for Windows

If you test in other browsers please let me know.

Summary

I hope this tutorial was helpful. Feel free to post any comment.

Have a great week!