Файлы Скрипты и модификации

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

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

Установка:
Ставим где хотите видеть кнопки:
Код
<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);  
}
Источник: ruseller.com
Материал «Кнопки в стиле сайта YouTube» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Комментарии
Наш опрос
Как Вам наш дизайн?
1270 ответов
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
Никто ещё не посетил
© 2012-2021 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz
Внимание! На сайте ведутся технические работы.
Некоторые изображения и файлы могут быть недоступны