Главная » 2012 » Февраль » 4 » Кнопки в стиле сайта YouTube (Скрипты для ucoz)
04.02.2012, 19:04

Кнопки в стиле сайта 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);
}
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: Скрипты uCoz | Просмотров: 2243 | Добавил: sold93 | Рейтинг: 5.0/2 |
Теги: кнопки, сайта, Стили
Всего комментариев: 1
+1  
1 frenkmalcov   (04.02.2012 22:55) [Материал]
Аватар пользователя
css рулит)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]