Метод html-верстки кнопок с применением псевдоэлементов

В этой статье я хочу рассказать о моём способе html-вёрстки кнопок. Появлению этой методики способствовал воистину монстрообразный способ кодирования с использованием семи (!) тегов на один элемент:

html

<div class="large_button">
	<span class="buttons submit_v2-button clickable">
		<i class="left left2"></i>
		<i class="body">
			<b>Текст кнопки</b>
			<i class="end">
				<i></i>
			</i>
		</i>
	</span>
</div>

Соответствующий CSS-код не отличался стройностью и элегантностью.

Как видно из примера, запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось неменее 30. Поэтому моей негласной задачей стало максимальное упрощение кода.

Первым шагом стала систематизация. Все кнопки были отсортированы на группы по размерам, изображениям и основному фону.

Первоначально появилась мысль: сделать все кнопки с применением CSS3, как это было описано в одной из статей хабра.
К сожалению, в этом случае мы ограничиваемся только кнопками с разной степенью скруглённости углов, и ещё мне не нравятся CSS-ошные тени. Ну, и хотелось чего-то более кроссбраузерного.

Вывод напрашивался только один: надо использовать псевдоэлементы :BEFORE и :AFTER.

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

html

<div class="neobtn-thick">Текст кнопки</div>

css

/* default */
*[class*=neobtn]{
	text-shadow: 0 1px 0 #ddd;
	cursor: pointer;
	background-color: transparent;
	display: inline-block;
	background-image: url(../images/buttons/buttons.png);
	white-space: nowrap;
}
	*[class*=neobtn]:before{
		background-image: url(../images/buttons/buttons.png);
		content: '';
		float: left;
	}
	*[class*=neobtn]:after{
		background-image: url(../images/buttons/buttons.png);
		content: '';
		float: right;
	}
/* BUTTONS */
/* 46px */
*[class*=neobtn-thick]{
	height: 46px;
	margin: 0 25px 0 45px;
	line-height: 45px;
	font-size: 24px;
	background-position: 0 -153px;
}
	*[class*=neobtn-thick]:before{
		height: 46px;
		width: 45px;
		background-position: 0 -245px;
		margin: 0 0 0 -45px;
	}
	*[class*=neobtn-thick]:after{
		height: 46px;
		width: 25px;
		margin: 0 -25px 0 0;
		background-position: 0 -199px;
	}
		*[class*=neobtn-thick-create]:before{background-position: 0 -291px;}
		*[class*=neobtn-thick-go]:before{background-position: 0 -429px;}
		*[class*=neobtn-thick-down]:before{background-position: 0 -567px;}		

Для ИЕ7 код почти такой же, только вместо псевдоэлементов используется метод insertAdjacentHTML для создания нужных нам HTML-элементов.
Этот CSS-код имеет смысл вынести в отдельный файл, подключать его только для пользователей ИЕ7, что-бы при случае безболезненно от него избавиться.

css

*[class*=neobtn]{
	zoom: expression(runtimeStyle.zoom = 1,
	insertAdjacentHTML('afterBegin','<div class="before"></div><div class="after"></div>'));
	position: relative;
	display: inline;
}
.before,
.after{
	background-image: url(../images/buttons/buttons.png);
	top: 0;
	position: absolute;
}

/* BUTTONS */
/* 46px */
	*[class*=neobtn-thick] .before{
		height: 46px;
		width: 45px;
		background-position: 0 -245px;
		left: -45px;
	}
	*[class*=neobtn-thick] .after{
		height: 46px;
		width: 25px;
		right: -25px;
		background-position: 0 -199px;
	}
		*[class*=neobtn-thick-create] .before{
			background-position: 0 -291px;
		}
		*[class*=neobtn-thick-go] .before{
			background-position: 0 -429px;
		}
		*[class*=neobtn-thick-down] .before{
			background-position: 0 -567px;
		}

Как видно по коду, все изображения я объединил в один вертикальный спрайт, что в итоге дало приличную экономию в объёме изображений и количестве http-запросов.

Использование селектора “*” позволяет делать кнопку из любого тега, не опасаясь, что вместо «neobtn-thick-create» вы напишите “[some-class]neobtn-thick-create[some-class]”.
Единственная проблема в данном случае: придумать первое слово в названии класса так, чтобы оно не являлось частью названия классов других элементов. Например, не стоит использовать очевидные слова типа «button» или «btn».

Теоретически, можно было бы писать имена классов раздельно, а не через дефис, но в этом случае возникла бы некая избыточность кода и был бы потерян целый ряд удобных имён классов таких как “button”, “thin”, “green” и т.д.

В итоге у меня получилось нечто среднее между передовыми и «классическими» технологиями html-вёрстки кнопок.