Меню рубрик для блога в виде кнопок

Новый улов из сети - это меню для верхней части шаблона блога, хедера (header) или близкому к нему виджету, хотя расположить его можете, где угодно. Идеально подходит для рубрик (категории).
Особая привлекательность этого меню в том, что оно целиком построено на css и очень легко регулируется. Сами кнопки при контакте с курсором меняют цвет.

Как и обычно, демо прямо здесь:

• jQuery
• js
• Html
• Хитрости
• Шаблон
• Виджеты
• Блоггинг
• Фиды
• Пикчи
• Сервисы
• Ссылки

Для меню на кнопках я использовал имена тегов этого блога, ссылки ставить не стал.
Само меню состоит из двух кодов:css и html. Css рекомендуется вынести в отдельный файл, либо использовать непосредственно в html виджете/гаджете. Первое предпочтительнее

css:

<style>
.tagHeaderHome { 
float: left;
font-family: "Helvetica", "Arial", sans-serif;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
 }
#tagHeaderHome { 
float: left;
height: auto;
margin-left: 15px;
margin-top: 5px;
position: relative;
width: 400px;
 }
ol, ul { 
list-style-image: none;
list-style-position: outside;
list-style-type: none;
 }
li { 
display: list-item;
 }
.tagHeaderHome .tag a { 
background-attachment: scroll;
background-clip: border-box;
background-color: #555555;
background-image: none;
background-origin: padding-box;
background-position: 0px 0px;
background-repeat: repeat;
background-size: auto;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #ffffff;
cursor: pointer;
display: block;
font-size: 12px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 5px;
margin-top: -2px;
padding-bottom: 3px;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
text-decoration: none;
width: auto;
 }
.tagHeaderHome .tag a:hover { 
background-attachment: scroll;
background-clip: border-box;
background-color: #2fabde;
background-image: none;
background-origin: padding-box;
background-position: 0px 0px;
background-repeat: repeat;
background-size: auto;
 }
.tagHeaderHome li { 
float: left;
 }
</style>

Небольшое пояснение:
#tagHeaderHome - отвечает за вывод все блока (здесь настраивается ширина с высотой блок и отступы относительно страницы)
.tagHeaderHome .tag a - общие свойства меню (размеры,цвет ссылок и рамки, поведение кнопок и ссылок)
.tagHeaderHome .tag a:hover - отвечает за состояние кнопок при наведении на них курсора мыши (цвет, размеры, отступы).
Размер 400 px (ширина) определяет кол-во элементов меню в строке. Меню рубрик не использует картинки, только скруглённые бордеры вокруг надписи (веб-элементы).

И html:

<div id="tagHeaderHome">    
    <ul class="tagHeaderHome">
     <li class="tag"><a href="ваша-ссылка">jQuery</a></li>
     <li class="tag"><a href="ваша-ссылка">js</a></li>
     <li class="tag"><a href="ваша-ссылка">Html</a></li>

     <li class="tag"><a href="ваша-ссылка">Хитрости</a></li>
     <li class="tag"><a href="ваша-ссылка">Шаблон</a></li>
     <li class="tag"><a href="ваша-ссылка">Виджеты</a></li>
     <li class="tag"><a href="ваша-ссылка">Блоггинг</a></li>     
     <li class="tag"><a href="ваша-ссылка">Фиды</a></li>
     <li class="tag"><a href="ваша-ссылка">Пикчи</a></li>

     <li class="tag"><a href="ваша-ссылка">Сервисы</a></li>
     <li class="tag"><a href="ваша-ссылка">Ссылки</a></li>
    </ul>   
   </div>

А вот как это же меню смотрится в паре с тёмным шаблоном:

Меню "позаимствованно" здесь.

Ну а что ещё интересного?
Небольшое меню для категорий