Делаем красивые кнопки

Original author: Alex Griffioen
  • Translation
fdgfd

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.



Техника раздвижных дверей


Что бы сделать наши кнопки практичными, мы должны учесть возможность растяжки кнопок. Для этого мы воспользуемся техникой «раздвижных дверей»(slidingdoors).
Наша кнопка будет состоять из основного тега a с вложенным в него тегом span, каждый из которых содержит одну из частей фонового рисунка.
Вот то, что HTML выглядит следующим образом:
<a class="button" href="#"><span>Bring world peace</span></a>

Очень просто, не так ли?
Теперь, нам надо разобраться с оформлением нашей кнопки в нормальном состоянии и в состоянии нажатия.

Вот что я думаю:
button-design
Мы будем использовать для обоих состояний одно изображение, просто изменяя его background-position.
Вот так выглядит наша заготовка с учетом всех факторов:
bg_button_span bg_button_a

Оформляем кнопку


Оформляем с помощью следующего 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>


Готово ^_^

Посмотреть пример
Скачать пример


Источник: Чернев.Ру — Веб-мастеринг в позитивном формате!

Similar posts

Ads

Comments 159

    +1
    href="#" — это брак. А CSS интересный.
      0
      Кстати, как правильно делать?
        +2
        href="/link" onclick="javascript();return false;"
        • UFO just landed and posted this here
            0
            Для юзеров с NoScript и ботов.
            • UFO just landed and posted this here
                +5
                Как юзер NoScript могу сказать, что четверть современных сайтов — вообще без скриптов, еще половина могут без них работать (без всплывающих меню и прочего, но корректно). В вебе рулит информация, а скрипт — всего лишь удобная иногда примочка к ней.
                  0
                  Можно вопрос - почему NoScript? Паранойя?
                    0
                    Надоела реклама, а ABP еще настраивать надо. NoScript кроме поддержания паранойи убирает флэш и баннеры со всего недоверенного. Ну и всплывающие окна 100% заблокированы.
                  +1
                  Для более существенных событий, таких как логин или регистрация, делают отдельные странички для юзеров с отключенными скриптами.
                  Т.е. если скрипт включен, событие отработается и пользователю, к примеру, будет отдан блок входа на сайт, если скрипты отключены, он перейдет на страничку авторизации.
                +2
                потому что есть средняя кнопка мыши
                  +1
                  И для "Open Link in New Tab".
                  • UFO just landed and posted this here
                      0
                      обработчик не должен быть ссылкой, а кпопка отправки должна быть submit'ом
                      • UFO just landed and posted this here
                          0
                          суть, еще как суть.
                          return false не имеет никакого отношения к сути элемента - оно просто отменяет действие по умолчанию при нерабочем яваскрипте.
                          ссылка должна куда-то вести, js будет лишь заменять переход по ссылке каким-либо действием (пример совсем близко - ссылка "войти" на хабре)
                          если же элемент не ссылается куда-либо, то, простите, какая же это ссылка?
                          рассматривайте UI сначала в отрыве от стилей - будет гораздо интереснее ;)
                        0
                        > открывает какое-нибудь окно
                        Во! Вот /link должен вести на это окно.
                        Просто видя руку с вытянутым пальцем над ссылкой/кнопкой, автоматически делаешь вывод "это ссылка", а не "это обработчик". Я думаю, я не один такой ((:
                  0
                  По правильному там должна быть ссылка пройдя по которой можно получить такой же результат как и с включённым js. Разница должна быть только в том, что понадобится загрузить новую страницу.
                  0
                  Это модель-которая легко трансформируется в любой конструкт
                  +1
                  Спасибо!
                    +5
                    Есдинственный минус у подобной реализации Sliding Doors, это то что прийдется указать жестко заданный размер шрифта в px, да и это не спасет от увеличения шрифта в Fire Fox.
                      +8
                      в Firefox <3
                      (кстати, это номер версии, а не сердечко)
                        +2
                        Прошу прощения за нереальный оффтоп, но я уже месяца 4 не мог врубится какого черта пишут где не попадя "меньше трёх". Вы мне глаза открыли.
                          –1
                          У меня когда-то так же было. Помню, не мог врубиться, почему в журнале "Хакер" постоянно ставят двоточие и закрывающую скобку. :)
                            –1
                            а некоторые до сих пор теряются при виде надписи "press any key".
                            Причем выражение "press a key" таких затруднений не вызывает Ж)
                      0
                      Вери гуд. Спасибо.

                      Ждём решения для submit кнопок, бо такая кнопка не подойдёт для формы авторизации.
                        +1
                        onClick="this.form.submit();return false;"
                          +3
                          <noscript><input type="submit" value="Всё равно отправить" /></noscript>
                          +2
                          Воспользуйтесь тегом button, немного изменив CSS (уберите привязку к тегу a или измените её на button). Тогда HTML будет примерно таким:
                          <code><button class="button" type="submit"><span>Отправить</span></button></code>
                          Работает точно так же, как обычный <input type="submit" />>. Основное отличие в том, что первый позволяет размещать в себе фрагменты HTML :)
                            +2
                            IE плохо реагирует на формы без submit...
                              0
                              Это в чём, простите, выражается? :)
                                0
                                в том, что такая форма перестает отправляться
                                • UFO just landed and posted this here
                          0
                          >>Специально для IE
                          >>В Internet Explorer нажатие кнопки не будет работать.

                          Надо было так ^__^
                            +6
                            Кнопка в Опере 9.5 себя очень странно ведет, то нажимается, то нет, то нажимается не везде, а только с правой стороны где вторая половинка фона.
                              +3
                              В смысле не не нажимается, а фон не меняет.
                                0
                                Аналогично в IE8
                                0
                                В ИЕ 7 косяк: При нажатии на кнопку (кнопку дальше не отпускаем) и отвода курсора (теперь кнопку можно отпустить), кнопка остается в нажатом состоянии.
                                  0
                                  Но при клике в любое место страницы — все встает на свои места.
                                  Да и обычному пользователю не прийдет в голову так извращаться с кнопкой, он кликнет и дело с концом ;)
                                    0
                                    А я привык, что если отпустить кнопку в другом месте, то я отменю нажатие кнопки - полезная фича была бы. Если уж говоришь "удобство", так и делайте до конца.
                                      0
                                      оно отменится, не волнуйтесь )
                                    +1
                                    В Firefox 2.0.0.13 то же самое.
                                      0
                                      согласен (и с бо_обликом и с а_в)
                                      • UFO just landed and posted this here
                                          0
                                          это не косяк, это особенность click-события. К сожалению, фиксится только с помощью навороченного обработчика, который, по сути, заменяет клик
                                            0
                                            onmouseout=blur?
                                              0
                                              боюсь, придется тогда добавить, как минимум, onmouseover=focus и, может быть, еще что-нибудь
                                                0
                                                хм... да, тут извращений должна набраться небольшая тележка
                                                например, умолчальное действие здесь будет перетягиванием ссылки...
                                                маскировать ссылки под кнопки вообще не стоит
                                                  0
                                                  к сожалению, это именно ссылки. Например, ссылка "купи меня", оформленная, как кнопка. Это же ссылка: она ведет на корзину с этим продуктом, а заказчикам хочется, чтобы выглядела поэффектнее. Вот и приходится извращаться...
                                                    +1
                                                    я неправильно выразился...
                                                    имею в виду - подменять кнопки ссылками, т.е. должно быть более-менее понятно, что мы куда-то можем перейти и при этом соответственно должно быть понятно, что этот элемент будет себя вести как ссылка (можно перетянуть на другой таб, посмотреть адрес и т.п.)
                                                    в таком ключе описанный "косяк" будет восприниматься правильно, как нормальное поведение
                                                    например, имхо, стоит оставлять подчеркивание (хороший пример - большие кнопки скачивания на сайтах программ)
                                          +1
                                          А почему бы не сделать что-либо подобное с настоящей кнопкой? Только с масштабированием та же проблема, но специально для неIE можно сделать фон в svg.

                                          Хотя все это нужно далеко не всегда. Если страница со стандартным стилем, ее проще оставить как есть, браузер будет использовать тему ОС для отрисовки элементов (не все браузеры умеют, но все же прогресс есть).
                                            0
                                            А эта красота на SEO не повлияет?
                                              0
                                              А как оно может повлиять?
                                              ПС учтут эту кнопку как простую ссылку.
                                                0
                                                Это я и хотел услышать :)
                                              –3
                                              Криво. Больше так не позорьтесь.
                                                +2
                                                Неконструктивная критика подобна понту.
                                                А как "прямо"?
                                                  0
                                                  http://img404.imageshack.us/img404/5022/img1ju6.png
                                                  http://img187.imageshack.us/img187/6756/img2qc0.png
                                                    +1
                                                    где инфо об условиях тестирования?
                                                      0
                                                      размер шрифта, это хорошо видно на скринах
                                                0
                                                Ох помню затрахался я набор из нескольких «sliding doors»-кнопок ровнять средствами CSS по центру. Получилось, кроссбраузерно :)

                                                А по поводу статьи... Мало. Где теория?
                                                  0
                                                  Поделитесь опытом, пожалуйста?
                                                    0
                                                    Я думал статью в блог тут написать, но пока времени нет. Могу по памяти сказать - надо курить информацию на cssplay.co.uk+ознакомиться с поведением IE6/7 и делением CSS между ними. Насколько я помню, 2 основные концепции это display: table; и display: table-cell; в нормальных браузерах, и display: inline-block; в IE'х. Проблема «sliding doors» и наборов из них в том, что float используется...
                                                • UFO just landed and posted this here
                                                    +1
                                                    ага, известный баг IE с морганием фона. Вроде должен лечится через заданием document.execCommand("BackgroundImageCache",false,true)
                                                    0
                                                    трюк примитивный, но новичкам будет полезен, но что же ты не указал на его главные плюсы:
                                                    - не нужно ждать подгрузки второго изображения, то есть уходит неприятный эффект "догрузки"
                                                    - этот метод спасает от моргания в IE, который не в состоянии кэшировать фоновые изображения.

                                                    ps: по тому же принципу можно описать и 3й вариант для :hover.
                                                      0
                                                      Возможно "простой", а не примитивный? Иначе хотелось бы увидеть более продуманные решения.
                                                      PS. С hover'om абсолютно согласен.
                                                      0
                                                      мне вот такой вариант больше нравится:
                                                      http://www.artlebedev.ru/tools/technogre…
                                                      коду немного побольше, но с масштабированием никаких проблем
                                                        0
                                                        Данное решение не работает в режимах strict и transitional для IE версии 6 и ниже.
                                                          0
                                                          давно пора забыть про ИЕ6 (и уж тем более ниже)
                                                            0
                                                            улыбнуло)

                                                            а про "ниже" согласен
                                                              0
                                                              поправка: давно пора забыть про ИЕ
                                                          +1
                                                          я, конечно, все понимаю, но 5Кб png-картинка на 2 небольшие кнопки — это как-то слишком...
                                                            0
                                                            вам так жалко трафика?
                                                              0
                                                              времени жалко...
                                                              поставь 100 таких картинок по 5 кб и удивись)
                                                                0
                                                                а какая разница сколько их? одна или 100 если это одна и та же картинка?
                                                                  0
                                                                  если одинаковые картинки, то несущественно, а если они разные, то скорость загрузки сайта в целом будет ужасна.
                                                                +1
                                                                просто во мне говорит оптимизатор...
                                                                  0
                                                                  поддерживаю)
                                                            0
                                                            прикольная статья. Очень полезная информация ;)
                                                              0
                                                              Если бы это всё "прикольное" ещё и работало как положено.. :(
                                                              –1
                                                              указали бы, что это перевод. и ссылку на оригинал =)
                                                                0
                                                                Вы издеваетесь? А я по вашему что сделал? 0_о
                                                                Что не сделаешь все равно придираются.
                                                                  0
                                                                  черт, извини, не увидел. просто в теле статьи нет ссылки на оригинал (
                                                                0
                                                                В Firefox ломается при небольшом увеличении шрифта :(
                                                                  0
                                                                  >В Firefox ломается при небольшом увеличении шрифта :(
                                                                  Да, фиксированная высота никуда не годится, ибо люди с плохим зрением (я в их числе) сайты смотрят под Ctrl-+

                                                                  Зато в Firefox 3 при отключенном режиме "масштабировать только текст" проблем нет :)
                                                                    0
                                                                    Кроме, проблемы с увелечением шрифта, есть вопрос:
                                                                    Все подобные примеры очень классные, но практически всегда нужно использовать не меньше 2-х, а иногда больше картинок.
                                                                    Я не большой специалист в CSS.
                                                                    мой программер меня постоянно долбит, чтобы я минимизировал количество картинок на дизайн в силу понятных обстоятельств . Особенно, это касается при работе со сложными интерфейсами.
                                                                    Т.е. мне приходится делать тяжелей код в хмтл, чтобы обойтись меньшим числом картинок, правилен мой подход?
                                                                      0
                                                                      правилен. Код можно потом через gzip гонять, а каждая картинка — это лишний запрос к серверу, намного тормознее выходит
                                                                        0
                                                                        Спасибо,
                                                                        Такие примеры значит только для красоты...
                                                                      0
                                                                      sexy buttons, херня, так как не scalable

                                                                      вот ещё кой-чего: http://www.monc.se/kitchen/59/scalable-c…
                                                                        0
                                                                        страшно было на кнопку с таким названием жать, но все-таки решился... вроде ракет в небе пока не видно. видимо не на тот скрипт у вас кнопка ссылается. поправьте баг)
                                                                          0
                                                                          Наверное хабраэффект, сервер пока разгружается (или ракеты загружаются). Потом полетят пачками =)
                                                                          +1
                                                                          Спасибо огромное.
                                                                            0
                                                                            Сори, я не понимаю, зачем делать этот эффект, если его будут видеть какие-то милисекунды... лучше сделать что-то похожее при наведении.
                                                                              +3
                                                                              Графика для элементов интерфейса есть ЗЛО.
                                                                                0
                                                                                Скажите, кстати, а как можно кармограф тоже получить? Ну, за исключением того, чтобы написать собственный? ;) Прошу прощения за оффтопик.
                                                                                0
                                                                                Зло — это пока элементы интерфейса относятся к браузеру. А когда они относятся к странице, что делать? Представьте сайт весь такой гламурненький и посреди него (ну в зависимости от системы конечно) серый шлакоблок…
                                                                                0
                                                                                Прочитано... обдумано.. "Красота - это когда нет ничего лишнего"...
                                                                                  –1
                                                                                  Рано вам еще переводить, учите русский и будьте внимательнее.
                                                                                  "...мы должны учесть возможность растяжки кнопок. Для этого вы воспользуемся..."
                                                                                    0
                                                                                    Это опечатка. И это не дословный перевод, а переработка скорее.
                                                                                      0
                                                                                      Тогда зачем оформлять статью в виде перевода? Лучше в таком случае сразу написать, что, дескать, нашел крутой прием у Иван-Иваныча, хочу поделиться.
                                                                                        0
                                                                                        Так легче указать источник и от куда взял идею и где изложил.
                                                                                        В других темах очень много придирались по этому поводу, что я «вор» — источники не указываю и прочее, надоело слушать. Хотя всеравно услышал :(
                                                                                          +1
                                                                                          Тогда попробуйте мой совет: если рассказываете о чем-то или ком-то своими словами, не надо оформлять это в виде перевода. Просто напишите в самом начале статьи, о чем это и у кого взяли. Поставьте себя на место других: мы читаем, возмущаемся наглым копипастом, а потом видим в конце статьи мелкую приписку.

                                                                                          Перевод подразумевает под собой более бережное отношение к оригиналу текста. Переводчик старается сохранить не только смысл, но и стилистику, приемы и интонации. Поверьте, не каждый копипаст с иностранного сайта можно считать достойным переводом.
                                                                                            0
                                                                                            >Поставьте себя на место других: мы читаем, возмущаемся наглым копипастом, а потом видим в конце статьи мелкую приписку.
                                                                                            Я не могу поставить себя на это место, для меня главное полезность информации, а не откуда она. Помоему кто так кропотливо обращает на это внимание просто психопат и ему, откровенно, нефик делать.
                                                                                              0
                                                                                              Успехов.
                                                                                                0
                                                                                                Представьте, что прочли статью, а затем встречаете ее в десятке инкарнаций по всему вебу. Строка "статья основана на источнике N" в самом начале каждого текста сохранит вам массу времени.
                                                                                      0
                                                                                      > В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript

                                                                                      Вы хоть в курсе, что в IE элемент button не будет реагировать на нажатие Enter, скажем на форме логина.
                                                                                        0
                                                                                        а можно не использовать вложенный span, а использовать Псевдокласс :first-letter
                                                                                        http://habrahabr.ru/search/?searchfor=fi…
                                                                                          0
                                                                                          маленький недочет: если "вдавить" кнопку и не отпуская левой клавиши мышки отвести курсор в сторону(за пределы) кнопка остается вдавленной
                                                                                            0
                                                                                            Покажите лучше, как сделать в IE6 полупрозрачный CSS-спрайт с тремя состояниями кнопок (обычное, наведенное и зажатое)...
                                                                                              0
                                                                                              Просто добавить hover и пририсовать стиль кнопки при наведении.
                                                                                                0
                                                                                                Ключевые слова: полупрозрачность и CSS-спрайт.
                                                                                                С этим вот проблемы. Решений найти не удалось.
                                                                                              +1
                                                                                              То же можно реализовать, использую одну картинку вместо двух: http://temp.uratsakidogi.msk.ru/rocket/
                                                                                              (ссылкой почему-то не вставляется)
                                                                                                  +1
                                                                                                  Поидее ретро, такие статьи все примерно одинаковые — слайдинг дурс + спрайты.
                                                                                                  Для новичков может быть "вау", а для меня, например, ничего нового.

                                                                                                  И вроде как иллюстрации из статьи я на каком-то буржуйском сайте видел)
                                                                                                    0
                                                                                                    hover'а не хватает тогда уж.
                                                                                                    на сайте Студии об этом есть статься - более практичная.
                                                                                                    если в примере (под фоксом пробовал) надать кнопку и не отпуская увески курсор и отпустить - кнопка остаётся нажатой.

                                                                                                    IMHO: кнопка должна быть кнопкой, но никак не ссылкой - об этом говорит PHP - он любит кнопки (особенно INPUT).
                                                                                                      0
                                                                                                      В Safari 3.1 тоже корректно не работает... Никакого эффекта "нажатия" нет, о нем позно догадаться по переиодическому мирганию надписи только если по этой кнопке бешенно долбить...
                                                                                                        0
                                                                                                        Только что проверил — все отлично работает!
                                                                                                          0
                                                                                                          Странно... Весь эффект нажатия проявляется в непериодическом подергивании надписи при клике... Слишком быстро нажимается кнопочка, поэтому и не видно ничего....
                                                                                                            0
                                                                                                            срабатывает onclick=onblur
                                                                                                            честно говоря, не понимаю смысла этого "хака", в ссылках он используется для убирания рамочки вокруг ссылки
                                                                                                        +1
                                                                                                        И версия Владимира Токмакова для png
                                                                                                          0
                                                                                                          Пожалуй лучшее. Объёмисто, но работает как надо.
                                                                                                          0
                                                                                                          а мне не нравится как это выглядит.
                                                                                                          И главное, что я критикуя ничего не могу предложить - не программист я, а дизайнер. Просто при нажатии на выпуклую кнопку будут несколько иначе ложиться тени и блики.
                                                                                                            0
                                                                                                            приветствую. прикинь, а у меня наоборот =) нарисуй, а я заверстаю и запрограмлю современно, а?
                                                                                                              0
                                                                                                              Даже самому стало интересно как это выглядит. А вот так (+ посветлее):

                                                                                                              off

                                                                                                              move on

                                                                                                              pressed


                                                                                                              Это значит, что по сути тени не меняются. В нажатом состоянии они просто не такие резкие.
                                                                                                                0
                                                                                                                Супер! до дому добирусь — сделаю =)
                                                                                                                0
                                                                                                                А как это будет на чисто былом фоне? #FFF
                                                                                                                  0

                                                                                                                  высветлил на скорую руку > photobucket
                                                                                                                  Но на самом деле, я показал как играют тени при нажатии. Не стоит брать эти картинки за окончательный вариант. Они с перспективой, а на веб-странице всё же лучше, чтобы её не было (или чтобы все детали подчинялись одной). Тут важно обратить внимание например на то, что на кнопке в нажатом состоянии появляется рефлекс внизу.
                                                                                                                    0
                                                                                                                0
                                                                                                                Где это написано про тень при нажатии?
                                                                                                                Я думал в интернете нету теней. Тень есть у яблока к примеру. Но откуда ей взяться у кнопки?
                                                                                                                  0
                                                                                                                  думай меньше, а наблюдай больше - толк выйдет, а красота останется.
                                                                                                                0
                                                                                                                Во-первых, по хорошему делать 2 конца и фон, а не один конец и еще один длинный конец. Ибо так кнопка будет действительно резиновой + будет меньше весить.
                                                                                                                Во-вторых, как уже писал, ссылки должны иметь вид , чтобы она работала для noscript пользователей, ботов и пользователей со слабыми script бразуерами (mobile ie etc). Хорошим примером считаю http://www.basher.ru, не смотря на ajax всякие приблуды + js окна для регистрации и прочего, сайт корректно работает и с выключенным JS.
                                                                                                                  0
                                                                                                                  Нафига 2 конца и фон? Это не правильно. А если нужна кнопка в 2 строки а дальше в одну?
                                                                                                                  Добавим сюда тот факт, что под разными браузерами и на разных платформах шрифты неидентичны и могут просто не поместиться в рамки кнопки, и что тогда?

                                                                                                                  А Вы проверяли, будет ли меньше весить кнопка? А я проверял и не раз. В одном файле весит меньше на 10-25%

                                                                                                                  И юзайте &lt; и &gt; для угловых скобок.
                                                                                                                    0
                                                                                                                    ок, реализуй на данном примере автора кнопку в 2 строки и покажи мне одну картинку, с помощью которой можно сделать резиновую кнопку, которая будет весить меньше на 10-25%, чем 2 отдельных конца и 1px фона.
                                                                                                                      0
                                                                                                                      1) кнопку растягивающуюся по горизонтали и вертикали (на две и более строк) с помощью двух концов и фона реализовать вообще нельзя. Точнее можно, но смысл нарезки на три части потеряется (тогда уж на 5 частей или 9: фон, 4 угла, 4 границы).

                                                                                                                      2) для сравнения размеров можешь взять этот архив: knoppa.zip
                                                                                                                        0
                                                                                                                        1) не потеряется, это раз. И два — твоим способом вообще эту проблему не решить.
                                                                                                                        2) сравнения размеров показали, что 3 части весят на 20+% меньше, чем одна
                                                                                                                          0
                                                                                                                          2) Вы троллите или просто побоялись архив скачать? Или у Вас бааайты тлиннне-е?
                                                                                                                          Цельная кнопка 658 байт, три файла — 718 байт. То же самое и с RGB и с greyscale. Можно дополнительно дожать pngCrush, получив 527 байтов на цельной и 686 на разрезанной (23% разницы).

                                                                                                                          Вы, извините, как считали? И на каком примере?
                                                                                                                            0
                                                                                                                            Дейсвительно где-то я ошибся с калькулятором, действительно вы правы. Однако мозг пока не способен этого понять.
                                                                                                                            Но это не решает проблему «резиновой» кнопки.
                                                                                                                              0
                                                                                                                              Чтобы Ваш мозг мог понять почему цельный файл меньше, почитайте про принцип сжатия и узнаете, что ещё в GIF появилось такое сжатие. Один из базовых принципов описыватся так: «рисовать в строку пиксель цвета [xR xG xB] N раз».

                                                                                                                              По поводу резиновости кнопки с Вами уже не хочу спорить. Рекомендую (как минимум) изучить матчасть (и поработать в вебстрое), и только после этого судить как быстрее, надёжнее, лучше, удобнее верстальщику…
                                                                                                                            0
                                                                                                                            + три запроса к серверу вместо одного
                                                                                                                              0
                                                                                                                              угу =)))) вашими бы браузерами да инет поглядеть. Расскажите IE о том, что он должен каждый раз брать картинку не из кеша, а с сайта.
                                                                                                                                0
                                                                                                                                Всё бывает в первый раз
                                                                                                                    0
                                                                                                                    Делается очень просто и одной картинкой...
                                                                                                                      0
                                                                                                                      если вы считаете «умным» преподносить в скрытом виде не очень умный способ организации подобной кнопкой, путем склеивания двух картинок в одну — вам на wmaster.ru
                                                                                                                        0
                                                                                                                        Одна картинка - меньше запростов к серверу - быстрее загрузка.
                                                                                                                        2. Делается очень просто банальным CSS - даже без танцев с бубном:
                                                                                                                        a {
                                                                                                                          background: url(image.gif) no-repeat top right;
                                                                                                                        }
                                                                                                                        a span {
                                                                                                                          background: url(image.gif) no-repeat top left;
                                                                                                                          margin-right: 10px;
                                                                                                                        }
                                                                                                                          0
                                                                                                                          ваша кнопка не будет прозрачной, и, как кнопка автора, не будет резиновой.
                                                                                                                            +2
                                                                                                                            Резиновой будет. Ровно настолько, насколько и авторская. А в даном примере прозрачность не играет роли и не есть самоцелью...
                                                                                                                              –1
                                                                                                                              если для вас цель — «оптимизировать» и без того не лучший способ рисования кнопок, то с задачей вы справились.
                                                                                                                                0
                                                                                                                                чего ты придираешься? сам же должен понимать, что кнопка шириной 1000px - это не правильно и вряд ли она будет использоваться.
                                                                                                                    • UFO just landed and posted this here
                                                                                                                        0
                                                                                                                        для полноты раскрытия темы еще хотелось бы побольше интерактивности на :hover, т.е. + еще одна картинка
                                                                                                                          0
                                                                                                                          Немного в сторону, но никто не припомнит способа вешания иконок на стандартные кнопки INPUT (BUTTON не предлагать)? Так что бы иконки нажимались вместе с кнопкой...
                                                                                                                            0
                                                                                                                            пральна, на png надо переходить
                                                                                                                              0
                                                                                                                              Красивые кнопки - красивыми кнопками, а вот у меня никак не выходит даже обычную кнопочку в форме темизировать. Все довольно просто: есть Drupal, пытаюсь приколотить панель регистрации в строку меню и форму поиска туда же, делаю все флоатами. В FF и других Strict-браузера все отображается отлично, а вот в IE6 - безбожно разъезжается (в особенности - форма поиска). Page.tpl.php выводит следующий стандартный HTML для формы логина-поиска:

                                                                                                                              <span class="login-search">
                                                                                                                              <div><a href="/user/login">Login</a>/<a href="/user/register">Sign up</a></div><form action="/search/node" accept-charset="UTF-8" method="post" id="search-theme-form">
                                                                                                                              <div> <input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
                                                                                                                              <div class="form-item">
                                                                                                                              <input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search-theme-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
                                                                                                                              </div>

                                                                                                                              <input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />

                                                                                                                              </div></form>
                                                                                                                              </span>

                                                                                                                              Спан login-search я сам добавил, чтобы все в одной строчке (меню) было.

                                                                                                                              CSS (рабочий в FF) выглядит так:

                                                                                                                              /*общая форма для логина и поиска*/
                                                                                                                              .login-search {float:right; width:30%;}

                                                                                                                              /*форма логина*/
                                                                                                                              .login-search div {float:left; width:30%; height:12px;}
                                                                                                                              /*форма поиска*/
                                                                                                                              .login-search #search-theme-form {float: right; width: 70%}
                                                                                                                              .login-search #search-theme-form div {float: right; width: 100%}

                                                                                                                              /*кнопка*/
                                                                                                                              .login-search #search-theme-form div .form-submit {float: right; width:30%}
                                                                                                                              /*поле*/
                                                                                                                              .login-search #search-theme-form div .form-item {width:70%; float:left; position:relative; top:-13px;}
                                                                                                                              .login-search #search-theme-form div .form-item .form-text {width:100%; float:left;}

                                                                                                                              В итоге получаем отличную картинку в FF (см FF.bmp, смотрим здесь). А вот в IE6 все отвратительно (IE6.bmp, тоже смотрим на http://www.drupal.ru/comment/reply/4473/79858). Второй день ломаю голову, чем это может быть вызвано и как исправить....
                                                                                                                                0
                                                                                                                                Потратил вчера немного времени на освоение этого способа.
                                                                                                                                Читал ОЧЕНЬ ПОХОЖЕЕ ОПИСАНИЕ на английском Тут.
                                                                                                                                Наткнулся кстати на способ оформления TAB'ов с помощю HTML списков.
                                                                                                                                Жаль Кармы не хватает, написал бы :)
                                                                                                                                  0
                                                                                                                                  Может указывать как первоисточник не Чернев.Ру(не он же придумал технику) а оригинал? Или это PR?
                                                                                                                                    0
                                                                                                                                    ха… спасибо помогло :)

                                                                                                                                    Only users with full accounts can post comments. Log in, please.