Кнопки в стиле сайта YouTube

Последняя вариация дизайна сайта YouTube имеет интересный вид кнопок (большей частью они расположены в нижнем колонтитуле), которые в обычном состоянии имеют еле различимую рамочку, но при наведении курсора мыши на них как бы "всплывают", побуждая посетителя нажать их.




Такой дизайн кнопок очень выразителен и отлично работает. 1) Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. 2) Посетитель все равно получает призыв нажать их, когда становится необходимо. 3) Они выражают другой функционал, в отличие от ссылок, расположенных рядом (нажатие на них не приводит к переходу на другую страницу). Такие кнопки открывают выпадающие панели для выбора установок...

Разметка для кнопок вполне обычная:

Code:

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

А стили нужно установить для всех трех состояний:

Code:

.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);
}

Готово! Используем, радуемся...
----------------------------------------------------------------------------------------------------------------------------------------------------------
Причина: В некоторых шаблонах в CSS есть изначально .button
Совет/Исправление:

Разметка для кнопок:

Code:

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

Стили для всех трех состояний:

Code:

. youtube_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;
}
.youtube_button:hover, .youtube_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;
}
.youtube_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);
}

Готово!

кнопочки и правда красивые. с меня лайк.