Вот решил написать свой очередной урок на тему html. В этом уроке рассмотрим кнопки. Вообще сначала я хотел написать скрипт, но не рискнул, т.к. на днях обновление uCoz`a и после обновления скрипт мог стать не рабочим. В общем начнем урок.
Для начала я покажу как оформлять кнопки.

Code

input и type трогать не нужно.
value - то, что написано на кнопке.
class - используется в основном для css (оформление кнопки)
id - писать не обязательно. это только в том случае, если кнопка активирует какой-то скрипт или тому подобное.
onclick - это функция которая активируется при клике на кнопку. Используется для скриптов и т.д.
В этом уроке рассмотрим именно class, то есть оформление кнопки через стили css.
После урока вы узнаете:
- Как изменять цвет кнопки при наведении мышки.
- Как изменить цвет надписи на кнопке.
- Как изменить цвет обводки кнопки и обводки при наведении.

При написании кнопки (см.выше) мы использовали class - "bogdan4eg", а значит и работать будем с ним.
Вот пример оформления css кнопки:

Code

.bogdan4eg {border: 0px; padding: 5px; font-size: 10px; width: auto; background: #398E9B; color: #ffffcc; cursor: pointer;}
.bogdan4eg:hover {border: 0px; padding: 5px; font-size: 10px; width: auto; background: #44A9B8; color: #ffffcc; cursor: pointer;}

border - обводка кнопки. в нашем случае равна нулю.
padding - отступление букв от краев кнопки
font-size - размер шрифта букв на кнопке
width - Ширина кнопки. В нашем случае используется auto (автоматически определяется сама)
background - цвет фона кнопки
color - цвет букв на кнопке
cursor - вид курсора

Ваш вопрос зачем это я писал 2 раза? Если вы еще не заметили то во втором случае после названия стиля я написал :hover. Что это значит? Это значит какое оформление кнопки будет после наведения мышки на нее. Таким образом можно меня данные оформления кнопки в зависимости от того наведена мышка на нее или нет. Можно таким образом менять все данные, которые описаны ваше. Например при наведении будет меняться обводка, цвет, цвет кнопки и т.д. Все что захотите! Надеюсь объяснил в понятной форме, для новичка. У вас вопрос "Зачем мне все это"? Ответ: Ну надо-же с чего-то начинать учить html и css! Не будете-же вы всю жизнь унижаться и платить деньги чтобы вам сделали что-то. Я, в свое время, когда плохо знал css, html просто бы мечтал о подобном уроке-примере. Я сам разбирался. Таким образом можно оформить не только кнопки, но и другие элементы. Я просто взял копку как пример!
Источник, автор урока: http://forucoz.com/
Вот я сделал пример: http://forucoz.com/html/buttoncss.html