Вграден разтеглив бутон с CSS фоново изображение

Някой знае дали има брониран (съвместим със стандартите XHTML1.1 строг, кръстосано браузър, не-javascript) начин за използване на CSS и фонови изображения за превръщане на вградена връзка във визуален бутон, който ще се разтегне, за да побере различни количества текст (или преоразмеряване на текст)?

Мисля, че трябва да използвам фонови изображения, тъй като бутоните на дизайнера имат заоблени ъгли с граница с различен цвят. Трябва да работи в IE6 (правителствена работа).

Сигурен съм, че отговорът е не, но както винаги смятам, че си струва да се провери.

Освен всичко друго, вече опитах варианти на техниката за плъзгащи се врати, но не мога t го накарам да работи, тъй като решението трябва да работи вградено (т.е. в рамките на параграф) и не мога да задам фиксирана ширина.

РЕДАКТИРАНЕ: Има няколко бутона, всеки от които има различен цвят за преден план, рамка и фон. Те също имат градиентно „лице“, но нямат нужда от прозрачност или нещо друго „неортодоксално“. За съжаление не мога да направя връзка към примери, тъй като съм под NDA.


person da5id    schedule 07.10.2009    source източник
comment
Бихте могли да спестите много объркване, ако всъщност се свържете с това как трябва да изглежда бутонът и как трябва да се разтяга, дали има включена непрозрачност, прозрачност, неортодоксални битове.   -  person meder omuraliev    schedule 08.10.2009
comment
Извинявам се, ако съм създал някакво объркване. Вижте моята редакция.   -  person da5id    schedule 08.10.2009


Отговори (4)


Не съм сигурен дали това ще отговаря на вашите нужди, но помогнах на някого с подвижни заоблени бутони в тази публикация... тя използва само HTML и CSS.

person Mottie    schedule 08.10.2009
comment
Не е директно, но последвах връзка от публикацията ви, за да намеря отговора си, така че +1 Наздраве :) - person da5id; 08.10.2009
comment
Хехе, значи намери линковете, които публикувах и там ;) Радвам се, че получи отговора си :P - person Mottie; 08.10.2009

Не мисля, че можете да направите това в рамките на вашите ограничения. Проблемът е, че имате един елемент, но за правилното разтягане са ви необходими три (неразтегната лява страна, разтегната централна, неразтегната дясна страна).

person John Fisher    schedule 08.10.2009
comment
Добър съвет (наздраве), но успях да го направя с един участък в котва. Ще отговоря на собствения си въпрос, в случай че някой друг трябва да го направи. - person da5id; 08.10.2009
comment
ах Значи сте го направили с два елемента вместо с един. - person John Fisher; 08.10.2009

Да, вероятно трябва да направите бутони за изображения за това.

person Anthony Mills    schedule 07.10.2009
comment
Благодаря, но това няма да работи, тъй като формуляр в абзац няма да се валидира. - person da5id; 08.10.2009
comment
... плюс методът, към който сте се свързали, използва Javascript. - person da5id; 08.10.2009
comment
Нуждае се само от JavaScript, ако се опитвате да прикачите манипулатори на събития или фънки ефекти при задържане. Можете ли да поставите формата около параграфа? - person Anthony Mills; 08.10.2009
comment
Но е с фиксиран размер. Имам нужда от бутона, за да мога да се разтягам. - person da5id; 08.10.2009
comment
Можете да използвате изображението, за да повторите-x, след което да зададете ‹a› да има минимална височина от X количество пиксели. Той ще се разшири с размера на буквата и няма да стане по-малък от зададената от вас ширина. - person Phil; 08.10.2009
comment
Не мога просто да настроя изображението да се повтаря поради заоблените ъгли – затова тръгнах по пътя на „плъзгащите се врати“ на първо място. - person da5id; 08.10.2009

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

person Anthony Mills    schedule 09.10.2009