Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты



Документация - Главная
- Macromedia Dreamweaver
- CSS
- Раскрутка
- PHP
- SQL
- Дизайн [1 2]
- Java
- Разное

главная > статьи >

Цвет и рисунок на кнопке

Цвет на кнопке

По умолчанию, цвет кнопок определенный в форме на веб-сайте, задается с помощью Оформления настроек рабочего стола Windows. Однако с помощью стилей, цвет можно указывать по своему желанию.

Пример
<form>
<input type=button style="background: #ff0000; height:40px; width:20px; line-height:12px; color: #000000" value="Красная">
</form>

Параметры используемые в примере приведены ниже в таблице.

Параметр Описание
background

Цвет кнопки в шестнадцатеричном формате

height

Высота кнопки

width

Ширина

line-height

Устанавливает высоту базовой линии текста. Чтобы текст на кнопке располагался посередине, следует подбирать этот параметр в зависимости от высоты кнопки.

color

Цвет текста

Рисунок на кнопке

Самый простой вариант создания кнопки, содержащей на себе рисунок - это нарисовать ее в каком-нибудь графическом редакторе. Такие кнопки поддерживаются в форме с помощью параметра input type=image.

Пример 1. Рисованные кнопки
<form>
<input type="image" border="0" src="pix/button1.gif" width="50" height="20">
</form>

Созданные указанным в примере способом кнопки, в полном смысле таковыми не являются, а скорее похожи на ссылки. При наведении курсора мыши на такую кнопку, курсор меняет свою форму, как и при работе со ссылками, а при нажатии на кнопку происходит отправка формы на сервер.

Стили позволяют на кнопках, созданных с помощью параметра input type=button или input type=submit, размещать любой фон или рисунок.

Пример 2. Создание фона на кнопке
<form>
<input type=button style="background: url(pix/button2.gif); height:20px; line-height:12px;" value="Кнопка с фоном">
</form>

Параметр url(bgbutton.gif) определяет, какой файл будет использоваться в качестве фона.

Точно таким же образом делается на кнопке и небольшой рисунок. Подготавливается изображение, которое будет использоваться в качестве фона, а на нем размещаете любую иконку.

- Рисунок для фона

Пример 3. Размещение рисунка на кнопках
<form>
<input type=button style="background: url(pix/button2.gif) no-repeat left; height:20px; line-height:12px;" value="    Кнопка с рисунком">
</form>

url(imgbutton.gif) указывает пукть к рисунку, no-repeat left означает, что фон не повторяется и выровнен по левому краю.

Так как фоновое изображение, так же как и текст, выравнивается по левому краю, чтобы не произошло наложения рисунка и текста друг на друга, текст надо сместить вправо, добавив перед ним несколько пробелов.

Автор: Влад Мержевич,
vebius.com.ru

главная > статьи >

Реклама

Простой конкурс с денежными призами!





Rambler's Top100 Рейтинг@Mail.ru