Кнопки в стиле сайта YouTube для uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

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


Описание кнопок:

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

Установка кнопок:

В таблицу стилей (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>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 19.04.2016 в 07:00
Материал просмотрен: 1121 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо

2 комментария


Roman
Роман Сергеев @Roman 18.09.2015 03:061
+2
Кнопки старые, но мне нравятся
webmasterivan
webmasterivan @webmasterivan 19.09.2015 12:582
0
Да ладно, какие они старые? Я таки красивые кнопки впервые вижу
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта