Вы вошли как:  Гость
Форум
Это сообщество, объединяющее в себе пользователей, заинтересованных в создании сайтов и разработки дизайнов различной тематики. У нас вы сможете узнать мнения профессионалов по любым вопросам или поделиться своим опытом с неопытными пользователями, найти полезную информацию и просто пообщаться с хорошими людьми.
Присоединяйтесь к нам!

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

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

Установка кнопок:
В таблицу стилей (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);  
}


Код кнопочки:

Код
<button class="button" role="button">Тест кнопка№1</button>
Комментарии
Статистика