|
|
Каталог статей
Кнопки в стиле YouTube
много кнопок, например кнопка опроса это "Ответить" или кнопки чата а также добавления материала на сайт, вообщем внешний вид кнопок не менее важен чем прочие елементы дизайна на сайте.
Не стоит пренебречь особыми стилями кнопок, ведь они предадут вашему сайту особую изюминку, и в некотором смысли "Шик"
Данный вид кнопки для ucoz, разделён на три группы, это:
Состояние по умолчанию - Обычное состояния кнопки, без каких либо воздействий на неё, со стороны пользователя.
Состояние hover/focus - Состояние кнопки меняется при наведении на неё.
Состояние active - Данный вид кнопки приводится в показанное состояние при помощи клика.
Способ подключения стилей один:
Данный код, вызывает кнопку, где "Кнопка #1" это название кнопки, вставляем код туда где хотим видеть:
Code <button class="button" role="button">
Кнопка #1
</button>
Стили-же, нужно устанавливать для каждого состояния кнопок.
В таблицу стилей пихаем код:
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 | Добавил: BeyB (08.01.2013)
|
| Просмотров: 771
| Рейтинг: 0.0/0 |
|
Мой профиль
Привет, Гость
Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
|
