Урок-инструкция о том, как следует делать кнопки предназначенные для расположения внутри текста. Имеется в виду, что кнопка будет располагаться на базовой линии строки между словами. Вот так:

Если мы располагаем кнопку внутри текста значит это кому-нибудь нужно мы хотим на неё нажать. А для нажатия обычно используются такие виды элементов, как ссылка и кнопки формы.

В случае со ссылкой всё просто: помещаем среди текста ссылку и задаем ей фон. Но чтобы фон отображался и выравнивался корректно, ссылке следует добавить свойство:

.button {
	display: -moz-inline-box; /* только для FF 2 */
	display: inline-block;
}

Т. е. мы превращаем наш строчный элемент в строчно-блочный. Firefox 2 это свойство не поддерживает, поэтому указываем специальное специфичное свойство имитирующее строчный блок. Следующее за ним свойство предназначено для всех остальных браузеров. После этого можно задать фон для кнопки.

Что делать если нужно в качестве фона задать две картинки: левую и правую? Для так называемого эффекта «Sliding Doors», нужно как минимум два элемента.

Сначала я попробовал обойтись без лишнего элемента:

• :first-line — не подходит, поскольку предназначен для элементов заведомо блочного уровня, и Опера сразу же переносит все слова в несколько строк и у ссылки пропадает фон.
• :first-letter — не подходит, поскольку в Опере работает только для элементов заведомо блочного уровня
• :before или :after вместе с content: ” ” — не подходят поскольку внутренний отступ (padding) у строчных элементов по вертикали в браузере Firefox отличается от Opera и Safari, а если превращать вставленный контент в элемент блочного уровня, то Firefox не поддерживает для него плавающий режим (float), а inline-block в Firefox позиционируется со сдвигами по вертикали.

Можно было бы использовать хаки, но кто гарантирует, что в других версиях браузеров они будут доступны? Единственное в чём я уверен, так это в необратимости работы хаков для IE 6 и 7 (Хотя мне недавно приснился сон, что IE 6 обновили, исправили ошибки и добавили табы…)

Псевдо-классы и псевдо-элементы я проверял только в браузерах Safari, Opera и Firefox 3. Если в них не удается правильно спозиционировать всё что я хочу, то в другие браузеры я даже не смотрю.

Итог: придется использовать дополнительный элемент.

…laboris nisi ut aliquip
	Кнопка как ссылка
ex ea commodo consequat…

Решение в CSS:

p{
	line-height: 20px;
}
.button {
	display: -moz-inline-box; /* только для FF 2 */
	display: inline-block;
	background: #83af31 url(button-r.gif) no-repeat right top;
}
.button span {
	display: block; /* нужно для FF 2 */
	display: inline-block; /* для всех кроме FF 2 */
	padding: 0 10px;
	height: 100%;
	background: url(button-l.gif) no-repeat left top;
	cursor: pointer;
}
.button:link span, .button:visited span {
	color: #fff;
	text-decoration: none;
}
.button:hover span, .button:active span {
	color: #dfd;
	text-decoration: none;
}

Некоторые пояснения:

• Высота кнопки должна равняться высоте строки в этом тексте. Это обязательно, иначе будут проблемы с позиционированием картинок на фоне. Опять же, для корректного отображения фона в IE 7 следует для span тоже добавить высоту, можно равной высоте кнопки, а можно просто — 100% (Примечание: это не связано с hasLayout)
• Для внутреннего элемента, сначала во всех браузерах применится «display: block», а потом, во всех кроме FF 2 сработает свойство «display: inline-block». Первое свойство будет корректно работать в FF 2, а второе — в IE 6, остальным браузерам всё равно.
• Добавлено свойство «cursor:pointer», чтобы в IE при наведении на кнопку курсор стал «указующим перстом».

Развиваем тему…

Что если кнопке нужно добавить что-то вроде стрелочки, указующей куда-либо. Например вот так:

Во-первых, если делать для всех браузеров кроме IE, то лишний элемент добавлять не нужно, можно воспользоваться «:after» и вставить стрелочку таким образом:

.button span:after {
	content: " ";
	display: block;
	margin-top: -2px;
	width: 100%;
	height: 8px;
	background: url(button-arrow.png) no-repeat top;
}

Т. е. внутри элемента span, после текста вставляется абстрактный строчный элемент с пробелом в качестве содержимого, превращается в блочный элемент и чуть чуть поднимается вверх.

Схематически это можно изобразить так:

Но поскольку надо сделать так, чтоб работало и в IE тоже, то придется добавить ещё один лишний элемент, а кнопке стоит добавить дополнительный класс:

…laboris nisi ut aliquip
	Кнопка как ссылка
ex ea commodo consequat…

Позиционирование для добавленного элемента уже будет абсолютное и в CSS добавится следующий код:

.button.active {
	height: 20px;
	vertical-align: bottom; /* нужно для Opera */
	*vertical-align: baseline;	/* только для IE */
}
.button.active span {
	position: relative;
}
.button.active span b {
	display: block;
	position: absolute;
	left: 50%;
	top: 18px;
	margin-left: -7.5px;
	width: 13px;
	height: 8px;
	background: url(button-arrow.png) no-repeat top;
}

Итак, что же мы сделали:

• Для класса «active» добавили высоту, чтобы высота кнопки не увеличилась за счёт добавленного элемента.
• Туда же добавили вертикальное выравнивание по низу, чтобы в Opera из-за дополнительного элемента не возникло сдвигов. Отменили выравнивание по низу для IE с помощью хака. Другим браузерам по барабану.
• Для элемента span добавили «position: relative», чтобы абсолютное позиционирование стрелочки было относительно элемента «span».

В готовом примере описание элемента «b» и хаки для IE были вынесены в Conditional Comments. Т. е. код почти валидный, не считая свойства «-moz-inline-box» для Firefox 2.

Вариант с кнопкой «submit» и «button», ждите в следующей статье.