Комментарии 53
кат же
0
Советую почитать: stopdesign.com/archive/2009/02/04/recreating-the-button.html
+3
Не понимаю проблемы? вы в трех из четырех предложных на «Собственно вот HTML», кнопку button на альтернативные варианты которые адекватно воспринимают тот же :hover без «ухищрений…
Если вы уж по-умолчанию используете в своем методе js, то есть масса альтернатив обычным баттонам которые исполняют свои функции через ajax и при этом не требуют для себя стооолько строк кода.
Если вы уж по-умолчанию используете в своем методе js, то есть масса альтернатив обычным баттонам которые исполняют свои функции через ajax и при этом не требуют для себя стооолько строк кода.
-2
Не могу понять о чем Вы говорите.
+11
товарищ имел в виду:
эти плагины на js.
В общем решение интересное. но чем не удовлетворят вариант … любые теги.., тогда, если я правильно понимаю, можно обойтись без данных хаков т.к. 6 нормально работает с a:hover?
- csshover2.htc и conditional comments, чтобы научить IE6 понимать CSS-конструкции типа: div.button:hover
эти плагины на js.
В общем решение интересное. но чем не удовлетворят вариант … любые теги.., тогда, если я правильно понимаю, можно обойтись без данных хаков т.к. 6 нормально работает с a:hover?
0
IE8 это новы геморой для верстальщиков ( Спасибо за оригинальное решение
-2
Это не кнопочки, а какая-то фигня.
Кнопочка это /> а не как не то что вы предлагаете. И раскрашивается через CSS не хуже.
Кнопочка это /> а не как не то что вы предлагаете. И раскрашивается через CSS не хуже.
-2
Универсальность этих кнопок в том что в них можно вставить любое слово и/или картинку, и не вырезать новую кнопку под каждое название кнопки.
Стандартную можно раскрасить через CSS как угодно не спорю, но здесь используется в виде украшения фоновое изображение, а метод раздвижных дверей позволяет вставить любое содержимое, что не получиться с ходу сделать с кнопкой типа
Стандартную можно раскрасить через CSS как угодно не спорю, но здесь используется в виде украшения фоновое изображение, а метод раздвижных дверей позволяет вставить любое содержимое, что не получиться с ходу сделать с кнопкой типа
+2
изображение slonig.ru/works/buttons/bg-button-r.gif можна б сделать пошыре: при раздвижении текста больше чем на 250px — пустота…
0
… и объединить с slonig.ru/works/buttons/bg-button-r.gif
0
Идея не так уж и нова. Первый раз лично я встретил такое решение на форумном движке Novaboard.
-4
Можно обойтись и одним изображением. Нарисовав одну длинную кнопку (в 3-х состояниях, в данном случае).
Задать для
У вас ход мыслей правильный, но не доработано
Задать для
.button
отступ справа равный ширине закруглений и дать background: url(image) no-repeat top right
. а у внутреннего элемента задаль отступ слева и background: url(image) no-repeat left top;
У вас ход мыслей правильный, но не доработано
+2
В Seamonkey все кнопки разъезжаются(движок firefox 2)
0
Привет, inline-block! Пока firefox 2!
+3
Привет, -moz-inline-stack! И снова здравствуй, firefox 2!
+12
А почему именно -moz-inline-stack, а не -moz-inline-block или -moz-inline-box, скажем?
-2
Только не забываем что для содержимого такого «inline-block»'а придется сделать display: block;
-1
в ие6 с кнопочкой «справедливы» косячок.
-1
> Две картинки(1, 2) для CSS Sprites
Почему бы одной не сделать, прикрепив вторую слева к первой?
Почему бы одной не сделать, прикрепив вторую слева к первой?
+1
предлагаю обойтись одной картинкой и не думать о ширине кнопки.
+2
Я использую вот такой вариант
У этого есть есть несколько плюсов
______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru
<a href="#" class="button"><img class="delete" src="empty.gif" alt=""/></a>
.button {
width:16 px;
height:16 px;
background: url ('images.gif') no-repeat;
}
.button .delete {
background:0 px 0 px;
}
.button: hover .delete {
background:0 px 16 px;
}
У этого есть есть несколько плюсов
- У ссылок в ие6 работает hover
- Если у пользователя отключены картинки тогда отобразится альтернотивный текст
- Можно в ссылку добавить альтернативное действие если отключен javascript
______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru
-2
Капитан очевидность спешит сообщить, что можно добавить к span перед «display:inline-block» «display:-moz-inline-stack», а к вложеному элементу применять block, а не inline-block, и тогда в ff2 все будет отлично,
можно делать кнопкой тег «a», а не «span», и js отправить фтопку,
можно использовать одну картинку,
можно делать кнопкой тег «a», а не «span», и js отправить фтопку,
можно использовать одну картинку,
+7
что будет при увеличении размера шрифта?
+2
в 2 firefox плывут кнопочки… правая часть выше чем левая(
а так красиво))
а так красиво))
+2
Поведение отличается от нормальных кнопок — если нажать и попробовать увести мышку с кнопки (что бы избежать срабатывания), то во-первых получается drag&drop, а во-вторых кнопка остаётся нажатой.
+1
Интересный вариант! В букмарки.
0
Америку, стоить заметить, не открыли, ну да и ладно ))
А что вам мешало, использовать одно изображения, и всё те же спрайты для его смещения?
А что вам мешало, использовать одно изображения, и всё те же спрайты для его смещения?
-1
Старо как мир, да еще и слишком сложно :) Давно есть решения и с одной картинкой, и без htc-файлов. Советую покурить на эту тему cssplay.co.uk
0
Мне больше нравится такой вариант.
+2
Safari 3 в обычном состоянии кнопка «отправить» разъезжается справа. Если наевсти мышку – слипается.
+1
command+ или command–
и все быстро разваливается
и все быстро разваливается
0
Иллюстрация в этой статье была бы очень кстати. А то заголовок «Красивые кнопочки», а убедиться в этом предлагается взглянув на код.
0
В итоге вместо красивейших кнопок OS X, приходится видеть какое-то потребное говно, нарисованное кем-попало. Чем это говно лучше, кроме того, что туда можно вставить ушлепишную пиктограмму?
-6
Если честно перый раз подобное увидел гдето в 2003 году и тогда еще эту конструкцию гордо обозвали «Двойные двери» (убейте не знаю почему) ее минусы заметны, даже очень, первое это гиганто подобная картинка, второе она не будет тянутся бесконечно и третье использует лишний js для обработки в css div:hover и тп…
я самже использую собственую надумку которою возможно придумал не один я и я не первый до нее допер, код исходный выглядит примерно так и кстати количество картинок леггко сокращается до 1,
<a href="#"><i></i>текст<b></b></a>
кому интерестно могу продробно расжевать принцип/
я самже использую собственую надумку которою возможно придумал не один я и я не первый до нее допер, код исходный выглядит примерно так и кстати количество картинок леггко сокращается до 1,
<a href="#"><i></i>текст<b></b></a>
кому интерестно могу продробно расжевать принцип/
-2
левые края размешенны в файле под правыми? (LLLRRR)
-1
Во-первых, не двойные. Sliding переводится как «скользящие». И логика в этом есть.
А во-вторых, в вашем случае один из тегов лишний :-) Хватает двух тегов, одной картинки и никаких javascript'ов.
А во-вторых, в вашем случае один из тегов лишний :-) Хватает двух тегов, одной картинки и никаких javascript'ов.
-1
Да? ну и поведайте миру пожалуйста как использовать кнопку с разными краями и для этого всего использовать только один тег? Я имеею виду кнопку с не сплошным задним фоном а красочным разрисованым… а? Помойму никак, вообще. три элемента и три тега все правильно.
Если расматривать меню хабры то там достаточно двух элементов так как задний фон статичен и полностью одного цвета.
Если расматривать меню хабры то там достаточно двух элементов так как задний фон статичен и полностью одного цвета.
-2
Я нигде не говорил про один. Нужно два тега. Я всегда использую
<a href="#"><strong>Нажми меня</strong></a>
А три тега, как у вас, явно перебор.
<a href="#"><strong>Нажми меня</strong></a>
А три тега, как у вас, явно перебор.
0
Я про кнопку которая будет тянутся вплоть до бесконечности и для которой картинка будет минимального размера, а не подогнутая под максимальную ширину.
-2
не один… два (оговорился), но суть не меняется, поведуйте? Как у автора поста? так там ограничение по ширине.
-2
НЛО прилетело и опубликовало эту надпись здесь
Вообсче я думаю разумным использовать вообще один тег и применять к нему before и after. Это работает во всех современных браузерах. Для старых версий ИЕ в этом случае можно применить insertAdjacentHTML. Рано или поздно все браузеры будут поддерживать псевдоклассы.
+2
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем красивые кнопочки