Встроенная эластичная кнопка с фоновым изображением CSS

Кто-нибудь знает, есть ли пуленепробиваемый (совместимый со стандартами XHTML1.1 строгий, кросс-браузерный, не JavaScript) способ использования CSS и фоновых изображений для превращения встроенной ссылки в визуальную кнопку, которая будет растягиваться для размещения различного количества текст (или изменение размера текста)?

Я думаю, что мне нужно использовать фоновые изображения, так как кнопки дизайнера имеют закругленные углы с разноцветной рамкой. Он должен работать в IE6 (правительственная работа).

Я уверен, что ответ - нет, но, как всегда думал, стоит проверить.

Помимо всего прочего, я уже пробовал варианты техники раздвижных дверей , но не могу заставить ее работать, поскольку решение должно работать встраиваемо (то есть в абзаце), и я не могу установить фиксированную ширину.

РЕДАКТИРОВАТЬ: Есть несколько кнопок, каждая из которых имеет свой цвет для переднего плана, границы и фона. У них также есть градиентное «лицо», но нет необходимости в прозрачности или чем-то еще «неортодоксальном». К сожалению, я не могу ссылаться на примеры, так как нахожусь под NDA.

7.10.2009 23:24:21
Вы могли бы избежать путаницы, если бы на самом деле ссылались на то, как должна выглядеть кнопка и как она должна растягиваться, если есть какая-то непрозрачность, прозрачность, неортодоксальные биты.
meder omuraliev 7.10.2009 23:46:09
Извиняюсь, если я создал какую-то путаницу. Смотрите мое редактирование.
da5id 8.10.2009 00:06:31
4 ОТВЕТА

Да, вам, вероятно, нужно сделать кнопки изображения для этого.

0
7.10.2009 23:58:28
Спасибо, но это не сработает, так как форма внутри абзаца не будет проверена.
da5id 8.10.2009 00:16:34
... плюс метод, с которым вы связались, использует Javascript.
da5id 8.10.2009 00:17:35
JavaScript нужен только в том случае, если вы пытаетесь присоединить обработчики событий или эффектные парящие эффекты. Можете ли вы поставить форму вокруг абзаца?
Anthony Mills 8.10.2009 01:07:44
Но это фиксированный размер. Мне нужна кнопка, чтобы растянуть.
da5id 8.10.2009 01:49:29
Вы можете использовать изображение для повторения-x, а затем установите для <a> минимальную высоту X количества пикселей. Он будет расширяться с размером буквы и не станет меньше указанной вами ширины.
Phil 8.10.2009 02:40:42

Я не уверен, что это подойдет вам, но я помог кому-то с закругленными кнопками в этом посте ... он использует только HTML и CSS.

1
23.05.2017 12:07:04
Это не напрямую, но я пошел по ссылке из вашего поста, чтобы найти мой ответ, так что +1 Cheers :)
da5id 8.10.2009 03:47:48
Хе-хе, так что вы также нашли ссылки, которые я там разместил;) Рад, что вы получили ответ: P
Mottie 8.10.2009 03:54:17

Я не думаю, что вы можете сделать это в рамках ваших ограничений. Проблема в том, что у вас есть один элемент, но для правильного растяжения вам нужно три (не растянутая левая сторона, растянутый центр, нерастянутая правая сторона).

1
8.10.2009 03:36:55
Хороший совет (ура), но мне удалось сделать это с одним пролетом внутри якоря. Я собираюсь ответить на свой вопрос на случай, если кому-то еще это понадобится.
da5id 8.10.2009 03:39:46
Ах. Таким образом, вы сделали это с двумя элементами вместо одного.
John Fisher 8.10.2009 14:47:06

Кроме того, в будущем, вот страница о стилизации кнопок CSS .

0
9.10.2009 16:43:28