Главная » Скрипты для ucoz » Переключатели страниц

Создаём единый стиль кнопок на uCoz


Всем привет, в этой заметки я хочу поговорить о кнопках в системе uCoz и поставить жирную точку в данном вопросе, но для начала как и полагается смотрим демо в низу.

Предисловие:

Как правило у кнопок на сайте, существуют три основных отображения, а именно:

- отображение без каких либо действий стрелкой мыши
- отображение при наведении стрелкой мыши
- отображение при нажатии стрелкой мыши

я уверен, что кто нибудь сразу вспомнит и о четвёртом виде отображение кнопки, а именно когда вы уже нажали на неё, но как правило это распространяется на ссылки и брать её в расчёт не будем.
Шаг 1 - Поиск кнопки:

В большинстве случаев система uCoz предоставляет html код нужной кнопки, к примеру форма добавление комментарий или регистрация, поэтому мы можем прописать свой идентификатор (id) или класс (class) вручную.

А что делать когда мы не можем прописать свой идентификатор (id) или класс (class) вручную, к примеру кнопка опроса, всё просто, ищем в своём браузере функцию Исходный код страницы и ищем нужную кнопку на сайте.
Шаг 2 - Установим CSS:

А теперь самое время выбрать один из семи вариантов отображение кнопок на сайте uCoz, обратите внимание, что в css стилях я использовал параметр !important; для того или иного значения.
Cиняя кнопка
Код

/* Cиняя кнопка
------------------------------------------*/
.button_blue {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #1c73a4!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #166693!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #64b0db!important;  
  border-radius:3px;
}

.button_blue:active {box-shadow:inset 0px 0px 3px #166693!important;}

.button_blue:hover {background:#51a4d2!important;}


Зелёная кнопка
Код

/* Зелёная кнопка
------------------------------------------*/
.button_green {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #33a41c!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #258b10!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #78db64!important;  
  border-radius:3px;
}

.button_green:active {box-shadow:inset 0px 0px 3px #23880e!important;}

.button_green:hover {background:#6cca59!important;}


Красная кнопка
Код

/* Красная кнопка
------------------------------------------*/
.button_red {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #af080b!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #8e0104!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #f25c61!important;  
  border-radius:3px;
}

.button_red:active {box-shadow:inset 0px 0px 3px #8e0104!important;}

.button_red:hover {background:#ee353a!important;}


Оранжевая кнопка
Код

/* Оранжевая кнопка
------------------------------------------*/
.button_orange {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #d18816!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #b87813!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #f5ad3d!important;  
  border-radius:3px;
}

.button_orange:active {box-shadow:inset 0px 0px 3px #975c00!important;}

.button_orange:hover {background:#eda330!important;}


Сиреневая кнопка

Код

/* Сиреневая кнопка
------------------------------------------*/
.button_lilac {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #a41ca2!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #8a1388!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #db64d9!important;  
  border-radius:3px;
}

.button_lilac:active {box-shadow:inset 0px 0px 3px #820980!important;}

.button_lilac:hover {background:#c754c5!important;}


Бирюзовая кнопка

Код

/* Бирюзовая кнопка
------------------------------------------*/
.button_turquoise {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #1ca48a!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #0e8770!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #64dbc4!important;  
  border-radius:3px;
}

.button_turquoise:active {box-shadow:inset 0px 0px 3px #0e8770!important;}

.button_turquoise:hover {background:#53c5af!important;}


Тёмная кнопка
Код

/* Тёмная кнопка
------------------------------------------*/
.button_dark {
  cursor:pointer;
  padding: 7px 15px!important;
  border:1px solid #606060!important;
   
  font:11px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #606060!important;  
  font-weight: 700!important;  
  color:#fff!important;  
   
  background: #9f9f9f!important;  
  border-radius:3px;
}

.button_dark:active {box-shadow:inset 0px 0px 3px #555!important;}

.button_dark:hover {background:#888!important;}


Примечание

Для того, чтобы не прописывать каждый раз разному идентификатору (id) или классу (class) кнопки одни и те же css стили, их следует прописать в css стилях через запятую:
Код

.pollBut,
.button_blue {css стили}

.pollBut:active,  
.button_blue:active {css стили}

.pollBut:hover,  
.button_blue:hover {css стили}


Ниже я хочу собрать все идентификаторы (id) или классы (class) кнопок на uCoz, надеюсь дорогие читатели вы мне в этом поможете, оставляя их в комментариях ниже.

.pollBut - кнопка Ответить (Опрос сайта)
.allUsersBtn - кнопка список пользователей (На странице профиля)
.uSearchFlSbm - кнопка Найти пользователей (На странице профиля)
.manFlSbm или #siF20 - кнопка Сохранить (На странице редактирование профиля)
.manFlSbm - кнопка Добавить (На странице добавления новостей)
.manFlRst - кнопка Очистить (На странице добавления новостей)
.manFlRst или #dF19 - кнопка Очистить (На странице форума)
#sbm - кнопка Отправить (На странице личные сообщения)
#sbt47 - кнопка Регистрация (На странице регистрации)
.commSbmFl или #addcBut - кнопка Добавить комментарий
.commSbmFl или #gbsbm - кнопка Добавить комментарий (На странице гостевая книга)

На этом всё, спасибо за внимание!


Источник |  Автор: RuleZ-Dm | Категория: Переключатели страниц | Добавил: TheStorey | Дата: 05.02.2013
Скачать Создаём единый стиль кнопок на uCoz с сервера
2832_knopki_ucoz_v2.rar Размер: 2.1 Kb (cкачиваний: 196)
Скачать Создаём единый стиль кнопок на uCoz с файлообменника
Создаём единый стиль кнопок на uCoz.rar(cкачиваний: 196)
Посмотреть демо Создаём единый стиль кнопок на uCoz
Создаём единый стиль кнопок на uCoz(посмотрели: 1855)

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz