В этой небольшой заметки, мы будем изменять обычные, стандартные кнопки uCoz, у которых порой отсутствую css стили и такие кнопки выглядят просто ужасно.
Шаг 1 - поиск кнопки:
Для начала нам следует найти вашу кнопку у вас на сайте, как правило многие кнопки находятся в шаблоне html того или иного модуля на сайте, (Форма добавления комментариев, Форма добавления сообщений, Персональная страница пользователя и т.д.)
В таких шаблонах нам следует найти следующий html код (я взял для примера кнопку с формы добавления комментариев)
HTML-Code
<input type="submit" class="commSbmFl" id="addcBut" name="submit" value="- Добавить комментарий -">
Но бывает так, что некоторые кнопки уже вшиты в систему uCoz, к примеру кнопка опроса, для этого нам следует выбрать в вашем браузере функцию посмотреть исходный код страницы, и в появившемся окне через поиск ввести текст которые размещён на кнопке, тем самым найти нужный html код кнопки.
Шаг 2 - разбираем кнопку:
Давайте теперь разберём три параметра которые мы будем использовать пв наших кнопках:
HTML-Code
<input type="submit" class="commSbmFl" id="addcBut" name="submit" value="- Добавить комментарий -">
class
id
value - название кнопки
Шаг 3 - создаём свою кнопку:
Теперь давайте создадим свою кнопку для вашего сайта:
И так представим, что мы хотим создать 3 кнопки одного стиля, мы удаляем из html кода id и меняем класс кнопки на более лучшее название:
HTML-Code
<input type="submit" class="knopka_comment" name="submit" value="Добавить комментарий">
HTML-Code
<input type="submit" class="knopka_poick" name="submit" value="Найти">
HTML-Code
<input type="submit" class="knopka_pochta" name="submit" value="Отправить письмо">
многие прописывают для каждого класса отдельную строчку с одним и тем же стилем:
CSS-Code
.knopka_comment {
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
color:#226891; text-shadow:1px 1px 1px #fff;
background:#afd5eb;
border:1px solid #84ABC2;
padding: 4px 8px;
margin: 0px;
}
.knopka_poick {
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
color:#226891; text-shadow:1px 1px 1px #fff;
background:#afd5eb;
border:1px solid #84ABC2;
padding: 4px 8px;
margin: 0px;
}
.knopka_pochta {
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
color:#226891; text-shadow:1px 1px 1px #fff;
background:#afd5eb;
border:1px solid #84ABC2;
padding: 4px 8px;
margin: 0px;
}
такой вариант css стиля не правильный, так как код занимает много место, чтобы избежать данной проблемы мы просто перечислим каждый класс через запятую:
CSS-Code
.knopka_comment,
.knopka_poick,
.knopka_pochta {
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
color:#226891; text-shadow:1px 1px 1px #fff;
background:#afd5eb;
border:1px solid #84ABC2;
padding: 4px 8px;
margin: 0px;
}
многие наверно спросят, зачем тогда каждой кнопки прописывать разное название css класса - это делается для того, чтобы к примеру прописать каждой кнопки одно значение фона и разные значения шрифта:
CSS-Code
.knopka_comment {
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
}
.knopka_poick {
font: 12px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
}
.knopka_pochta {
font: 13px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
}
.knopka_comment,
.knopka_poick,
.knopka_pochta {
color:#226891; text-shadow:1px 1px 1px #fff;
background:#afd5eb;
border:1px solid #84ABC2;
padding: 4px 8px;
margin: 0px;
}
также для данного решения можно использовать идентификатор id для каждой кнопки, из-за чего код в css стилях может быть ещё короче.
Ну а теперь я выкладываю css стили разных кнопок, которые фигурировали в Demo:
Синий пример:
HTML-Code
/* Кнопка Demo №1
------------------------------------------*/
.knopka_demo1 {
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
color:#226891; text-shadow:1px 1px 1px #fff;
background:#afd5eb;
border:1px solid #84ABC2;
padding: 4px 8px;
margin: 0px;
}
.knopka_demo1:hover {
background:#c9e6f7;
}
/* -------------------------------------- */
Зелёный пример:
HTML-Code
/* Кнопка Demo №2
------------------------------------------*/
.knopka_demo2 {
font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold;
color:#229125; text-shadow:1px 1px 1px #fff;
background:#b7ebaf;
border:1px solid #84c28b;
padding: 4px 8px;
margin: 0px;
}
.knopka_demo2:hover {
background:#ccf5c6;
}
/* -------------------------------------- */
Оранжевый пример:
HTML-Code
/* Кнопка Demo №3
------------------------------------------*/
.knopka_demo3 {
font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold;
color:#b17902; text-shadow:1px 1px 1px #fff;
background:#fed66c;
border:1px solid #e3b346;
padding: 4px 8px;
margin: 0px;
}
.knopka_demo3:hover {
background:#ffe49c;
}
/* -------------------------------------- */
Красный пример:
HTML-Code
/* Кнопка Demo №4
------------------------------------------*/
.knopka_demo4 {
font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold;
color:#a53a55; text-shadow:1px 1px 1px #fff;
background:#fb8793;
border:1px solid #cb3f63;
padding: 4px 8px;
margin: 0px;
}
.knopka_demo4:hover {
background:#ffa9b2;
}
/* -------------------------------------- */
Тёмно синий:
HTML-Code
/* Кнопка Demo №5
------------------------------------------*/
.knopka_demo5 {
font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold;
color:#cad7e7; text-shadow:1px 1px 1px #555;
background:#858f9c;
border:1px solid #3f5269;
padding: 4px 8px;
margin: 0px;
}
.knopka_demo5:hover {
background:#979ea7;
}
/* -------------------------------------- *//
Вариант с картинкой:
HTML-Code
/* Кнопка Demo №7
------------------------------------------*/
.knopka_demo7 {
font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold;
color:#229125; text-shadow:1px 1px 1px #fff;
background:#b7ebaf url(http://ucoz-helper.ucoz.com/knopki/icon_knopka_02.png) no-repeat right;
border:1px solid #84c28b;
padding: 4px 35px 4px 8px;
margin: 0px;
}
.knopka_demo7:hover {
background:#ccf5c6 url(http://ucoz-helper.ucoz.com/knopki/icon_knopka_02.png) no-repeat right;
}
/* -------------------------------------- */
Вариант с закруглёнными краями:
незабываем, что мы можем сделать у кнопки закруглённые края:
HTML-Code
/* Кнопка Demo №9
------------------------------------------*/
.knopka_demo9 {
font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold;
color:#a53a55; text-shadow:1px 1px 1px #fff;
background:#fb8793;
border:1px solid #cb3f63;
padding: 4px 8px;
margin: 0px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.knopka_demo9:hover {
background:#ffa9b2;
}
/* -------------------------------------- */
На этом всё!
· 
20:55
