Цвет и рисунок на кнопке
По умолчанию, цвет кнопок определенный в форме на веб-сайте, задается с помощью
Оформления настроек рабочего стола 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 |
Цвет текста |
Рисунок на кнопкe
Самый простой вариант создания кнопки, содержащей на себе рисунок - это нарисовать
ее в каком-нибудь графическом редакторе. Такие кнопки поддерживаются в форме с
помощью параметра input type=image.
Пример 1. Рисованные кнопки
<form>
<input type="image" border="0" src="button.gif"
width="50" height="20">
</form> |
Созданные указанным в примере способом кнопки, в полном смысле таковыми не
являются, а скорее похожи на ссылки. При наведении курсора мыши на такую кнопку,
курсор меняет свою форму, как и при работе со ссылками, а при нажатии на кнопку
происходит отправка формы на сервер.
Стили позволяют на кнопках, созданных с помощью параметра input
type=button или input type=submit, размещать
любой фон или рисунок.
Пример 2. Создание фона на кнопке
<form>
<input type=button style="background: url(button.gif); height:20px;
line-height:12px;" value="Кнопка с фоном">
</form> |
Параметр url(button.gif) определяет, какой файл
будет использоваться в качестве фона.
Точно таким же образом делается на кнопке и небольшой рисунок. Подготавливается
изображение, которое будет использоваться в качестве фона, а на нем размещаете
любую иконку.
- Рисунок для фона
Пример 3. Размещение рисунка на кнопках
<form>
<input type=button style="background: url(button.gif) no-repeat left;
height:20px; line-height:12px;" value="Кнопка с рисунком">
</form> |
url(button.gif) указывает пукть к рисунку,
no-repeat left означает, что фон не повторяется и
выровнен по левому краю.
Так как фоновое изображение, так же как и текст, выравнивается по левому краю,
чтобы не произошло наложения рисунка и текста друг на друга, текст надо сместить
вправо, добавив перед ним несколько пробелов.
Влад Мержевич
http://www.html.krsk.ru/
« Назад
|
