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

Кнопки в стиле сайта 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» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Мини-чат
Для добавления необходима авторизация
Наш опрос
Как вы нас нашли?
634 ответа
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
© 2012-2018 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz