Удивительно, как некоторые граждане извращаются, чтобы сделать элементарные вещи. Странно, что никто не предложил простого решения такой простой задачи, особенно когда не учитывается размер шрифта и не нужна полупрозрачность. Вот мой вариант, как можно решить такую задачу:
Первое, что нужно сделать, это внимательно посмотреть и проанализировать исходный материал. Я вижу здесь обычный блок с отступами, на который наложена фоновая картинка.
То есть нужно сделать инлайновый блок высотой 22 пикселя, боковым паддингом в 12 пикселей и фоновой картинкой. Но есть небольшая проблема: текст внутри может меняться. Вместе с этим, естественно, должна «увеличиваться» фоновая картинка. Как этого добиться? Очень просто.
А что если мы сделаем два вложенных друг в друга блока и обоим положим одну и ту же картинку: первому блоку сделаем выравнивание по левому краю, а второму — по правому?.
Для этого саму картинку нужно сделать достаточно длинной — пикселей 400 по ширине,— чтобы даже очень длинный текст поместился. Реализация очень простая: два элемента с фоновой картинкой, вложенных друг в друга, внутреннему говорим padding: 0 12px;. Внутренний элемент разопрет внешний до нужных размеров.
Но есть еще одна незадача: фоновая картинка внутреннего элемента полностью перекрывает фон внешнего элемента:
Исправить это, опять же, довольно просто: снизим левый отступ у внутреннего элемента на 3 пикселя и сместим его на эту же величину вправо, освободив, тем самым, левый угол:
Теперь приступаем к верстке. По сути, нам нужно указать свойства только внутреннему элементу, сделав так, чтобы внешний элемент сам подстроился под внутренний. Для задания точных размеров нам всего-лишь нужно сделать эти элементы инлайн-блоками:
.styled-button, .styled-button button {
background:url(button.png) no-repeat;
display:-moz-inline-stack;
display:inline-block; /* Эмуляция для FF2 */
font-size:11px;
}
.styled-button {
margin-right:3px;
}
.styled-button button {
border:0;
margin:0;
padding:0 12px 0 9px;
position:relative;
left:3px;
height:22px;
line-height:22px;
background-position:top right;
white-space:nowrap;
}
Сам HTML-код совсем уж простой:
Естественно, мы, как и автор заметки на Хабре, забили на то, что пользователь захочет увеличить размер шрифта. Для таких случаев есть более универсальный метод.