Вы пришли к нам на портал что бы скачать\посмотреть
Урок по html. Как оформить кнопку, если возникнут вопросы по данному файлу
Урок по html. Как оформить кнопку, вы всегда можете задать свой вопрос на нашем
форуме.
С уважением, администрация isucoz.com.
Скачать Урок по html. Как оформить кнопку
Вот решил написать свой очередной урок на тему html. В этом уроке рассмотрим кнопки. Вообще сначала я хотел написать скрипт, но не рискнул, т.к. на днях обновление uCoz`a и после обновления скрипт мог стать не рабочим. В общем начнем урок.
Для начала я покажу как оформлять кнопки.
Code
<input type="button" value="Надпись на кнопке" class="bogdan4eg" id="bogdan" onclick="some_function()">
и
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
У вас есть сайт, но ты незнаешь какой у тебя тИЦ и ПР? Будь в курсе событий, поставь счетчик тИЦ и ПР на свой сайт!
Счетчик тИЦ и ПР.
