Техника раздвижных дверей
Что бы сделать наши кнопки практичными, мы должны учесть возможность растяжки кнопок. Для этого мы воспользуемся техникой «раздвижных дверей»(slidingdoors).
Наша кнопка будет состоять из основного тега a с вложенным в него тегом span, каждый из которых содержит одну из частей фонового рисунка.
Вот то, что HTML выглядит следующим образом:
<a class="button" href="#"><span>Bring world peace</span></a>Очень просто, не так ли?
Теперь, нам надо разобраться с оформлением нашей кнопки в нормальном состоянии и в состоянии нажатия.
Вот что я думаю:
Мы будем использовать для обоих состояний одно изображение, просто изменяя его background-position.
Вот так выглядит наша заготовка с учетом всех факторов:
Оформляем кнопку
Оформляем с помощью следующего css кода:
.clear { /* generic container (i.e. div) for floating buttons */ overflow: hidden; width: 100%;}a.button { background: transparent url('bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none;}a.button span { background: transparent url('bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px;}a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */}a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */}Специально для IE
В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript:
<a class="button" href="#" onclick="this.blur();"><span> … </span></a>Готово ^_^
Посмотреть пример
Скачать пример
источник