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

ФОРУМ Игромания и киномания – сообщество пользователей игрового портала Igromen.Do.Am.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления и сообщения, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.

ТОП-5 по сообщениям

Димон

754

ТОП-5 по репутации

754

Страница 1 из 1
1

Форум » Система UcoZ » Скрипты для uCoz » Кнопки в стиле сайта YouTube

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

03.11.2012 в 00:47

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

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

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

Code

<button class="button" role="button">
Кнопка #1 - кнопка которую хотите стилизировать
</button>

А это в CSS в любое место:

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

Форум » Система UcoZ » Скрипты для uCoz » Кнопки в стиле сайта YouTube

Страница 1 из 1
1

О портале Igromen.Do.Am

Контакты

В помощь пользователям