регистрация
856материалов
3264комментария
230тем на форуме
6750пользователей

Кнопки в стиле сайта 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
Материал просмотрен: 1347 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 4 комментария

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

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


Roman
Роман Сергеев @Roman 18.09.2015 03:061
+2
Кнопки старые, но мне нравятся
webmasterivan
webmasterivan @webmasterivan 19.09.2015 12:582
0
Да ладно, какие они старые? Я таки красивые кнопки впервые вижу
impiratbot
ПИМ Пират @impiratbot 13.05.2017 01:133
0
Подскажите пожалуйста, куда вставлять первый код, в разделе CSS я вставляю его в конце или вначале, но после этого у меня меняется весь шаблон на изнанку. Что я не так делаю?
Помогите пожалуйста, а то я не могу добавить ни один скрипт на сайт, всё упирается в раздел CSS
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0