CSS меню с картинка

Автор: liberal

Първо си правите ваши картинки с Photoshop.

Ето гo самия код :

<html>
<head><title>Menu</title>
<style type="text/css">
.menu {
width:120px; /*задаваме широчина*/
height:60px; /*задаваме височина*/
padding:3px 40px; /*задаваме вътрешните отстъпи*/
color:#000; /*цвят на текста в нормално състояние*/
font-weight:bold; /*форматиране на текста,в случая текста ще бъде удебелен*/
letter-spacing:0.5px; /*разстояние между буквите*/
background:#333 url('menu.jpg') 0 0px no-repeat; /*задаваме фон на бутона в нормано състояние*/
border:1px solid #000; /*задаваме рамка на бутона*/
text-decoration:none; /* задаваме да няма подчертаване на линковете*/
}

.menu:hover {
color:#FFF; /*цвят на текста когато сме посочили бутона*/
background-position: 0 -32px; /*посочваме стойностите откъде докъде да използва картинката за фон*/
}

</style>
</head>

<body>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a>
</body></html>