В связи с изменением дизайна сайта YouTube поменялся и стиль кнопочек, расположенных в подвале. И в сегодняшнем туториале мы научимся делать точно такие же!

Я считаю, что такой дизайн идеально подходит к содержанию подвала Youtube.

1) Состояние default немного приглушенное. Это сделано с тем, чтобы отвлечь наше внимание от основного содержания сайта.

2) При нажатии на кнопку пользователь испытывает реальные ощущения будто и впрямь нажимает на настоящую кнопку.

3) Каждая кнопка при нажатии на нее раскрывает панель с дополнительными настройками.

HTML

<button class="button" role="button">
   Кнопка #1
</button>

CSS

.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}

Посмотреть ДЕМО | Скачать исходники