@Triall3 апр 2009 в 13:31

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

4 мин

12K

CSS *

+49

Комментарии 53

@seiros 3 апр 2009 в 13:34

кат же

@Triall 3 апр 2009 в 13:38

Упс… Спрятал.

@small_jam 3 апр 2009 в 13:57

Советую почитать: stopdesign.com/archive/2009/02/04/recreating-the-button.html

@Triall 3 апр 2009 в 16:10

Спасибо;)

@Kaaboeld 3 апр 2009 в 13:57

Не понимаю проблемы? вы в трех из четырех предложных на «Собственно вот HTML», кнопку button на альтернативные варианты которые адекватно воспринимают тот же :hover без «ухищрений…
Если вы уж по-умолчанию используете в своем методе js, то есть масса альтернатив обычным баттонам которые исполняют свои функции через ajax и при этом не требуют для себя стооолько строк кода.

@Triall 3 апр 2009 в 16:05

Не могу понять о чем Вы говорите.

@medvoodoo 4 апр 2009 в 09:26

товарищ имел в виду:

csshover2.htc и conditional comments, чтобы научить IE6 понимать CSS-конструкции типа: div.button:hover

эти плагины на js.
В общем решение интересное. но чем не удовлетворят вариант … любые теги.., тогда, если я правильно понимаю, можно обойтись без данных хаков т.к. 6 нормально работает с a:hover?

@cuprum 4 апр 2009 в 15:23

В общем решение интересное
Угу, интересное, IE лучше вообще не учить таким методом hover'у элементов, ибо при достаточно большом количестве элементов браузер безбожно зависнет.

@dmitriykikkas 3 апр 2009 в 14:00

IE8 это новы геморой для верстальщиков ( Спасибо за оригинальное решение

@Triall 3 апр 2009 в 16:06

Ну я пока особого гемороя не испытал, но всегда можно включить режим совместимости.

@A_HREF 3 апр 2009 в 14:03

Это не кнопочки, а какая-то фигня.
Кнопочка это /> а не как не то что вы предлагаете. И раскрашивается через CSS не хуже.

@Triall 3 апр 2009 в 15:58

Универсальность этих кнопок в том что в них можно вставить любое слово и/или картинку, и не вырезать новую кнопку под каждое название кнопки.
Стандартную можно раскрасить через CSS как угодно не спорю, но здесь используется в виде украшения фоновое изображение, а метод раздвижных дверей позволяет вставить любое содержимое, что не получиться с ходу сделать с кнопкой типа

@nfx 4 апр 2009 в 11:22

изображение slonig.ru/works/buttons/bg-button-r.gif можна б сделать пошыре: при раздвижении текста больше чем на 250px — пустота…

@xadminx 6 апр 2009 в 12:11

… и объединить с slonig.ru/works/buttons/bg-button-r.gif

@lightcyber 3 апр 2009 в 14:14

Идея не так уж и нова. Первый раз лично я встретил такое решение на форумном движке Novaboard.

@kostos 3 апр 2009 в 14:14

Можно обойтись и одним изображением. Нарисовав одну длинную кнопку (в 3-х состояниях, в данном случае).
Задать для .button отступ справа равный ширине закруглений и дать background: url(image) no-repeat top right. а у внутреннего элемента задаль отступ слева и background: url(image) no-repeat left top;

У вас ход мыслей правильный, но не доработано

@Sabiko 5 апр 2009 в 13:20

На самом деле это чуть менее универсально. Если кнопка скруглённая и должна работать на любом фоне, то одним изображением не обойтись.
Но во всех остальных случаях одна картинка действительно предпочтительнее)

@serega011 3 апр 2009 в 15:41

В Seamonkey все кнопки разъезжаются(движок firefox 2)

@homm 3 апр 2009 в 16:52

Привет, inline-block! Пока firefox 2!

@ANDEREY 3 апр 2009 в 20:10

Привет, -moz-inline-stack! И снова здравствуй, firefox 2!

@Uratsakidogi 4 апр 2009 в 10:17

А почему именно -moz-inline-stack, а не -moz-inline-block или -moz-inline-box, скажем?

@homm 4 апр 2009 в 10:37

Они все дейсвуют немного по разному и добавляют разных глюков. Кто-то приноравился верстать с одним, кто-то с другим. Лично я тоже часто использую -moz-inline-stack и дополнительный блочный элемент.

@egorinsk 4 апр 2009 в 13:10

Только не забываем что для содержимого такого «inline-block»'а придется сделать display: block;

@hulinada 3 апр 2009 в 16:13

в ие6 с кнопочкой «справедливы» косячок.

@homm 3 апр 2009 в 17:11

> Две картинки(1, 2) для CSS Sprites
Почему бы одной не сделать, прикрепив вторую слева к первой?

@y0ga 3 апр 2009 в 17:12

предлагаю обойтись одной картинкой и не думать о ширине кнопки.

@Sabiko 5 апр 2009 в 13:31

Есть решение для двух конетейнеров без псевдо-элементов на js?

@y0ga 6 апр 2009 в 06:40

а в чём проблема сделать три контейнера?

@no_smoking 3 апр 2009 в 17:25

Я использую вот такой вариант

<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

@ANDEREY 3 апр 2009 в 20:15

Капитан очевидность спешит сообщить, что можно добавить к span перед «display:inline-block» «display:-moz-inline-stack», а к вложеному элементу применять block, а не inline-block, и тогда в ff2 все будет отлично,
можно делать кнопкой тег «a», а не «span», и js отправить фтопку,
можно использовать одну картинку,

@tenshi 3 апр 2009 в 20:53

что будет при увеличении размера шрифта?

@kagen 4 апр 2009 в 07:57

в 2 firefox плывут кнопочки… правая часть выше чем левая(
а так красиво))

@romik 4 апр 2009 в 08:07

Поведение отличается от нормальных кнопок — если нажать и попробовать увести мышку с кнопки (что бы избежать срабатывания), то во-первых получается drag&drop, а во-вторых кнопка остаётся нажатой.

@LDEV 4 апр 2009 в 08:09

Интересный вариант! В букмарки.

@frost_lab 4 апр 2009 в 08:54

Америку, стоить заметить, не открыли, ну да и ладно ))

А что вам мешало, использовать одно изображения, и всё те же спрайты для его смещения?

@Alinaki 4 апр 2009 в 08:58

Старо как мир, да еще и слишком сложно :) Давно есть решения и с одной картинкой, и без htc-файлов. Советую покурить на эту тему cssplay.co.uk

@SamDark 4 апр 2009 в 08:59

Мне больше нравится такой вариант.

@gutwulf 4 апр 2009 в 10:04

Safari 3 в обычном состоянии кнопка «отправить» разъезжается справа. Если наевсти мышку – слипается.

@qik 4 апр 2009 в 10:09

command+ или command–
и все быстро разваливается

@XAMelleOH 4 апр 2009 в 10:20

Еще один все понял!

Уважаемый Delka уже объяснял, что не нужно каждую мелочь которую понял новичок постить на хабре.

Метод, который Вы использовали далеко не нов — обычно звется «раздвижными воротами», и давно уже обсосан в разных источниках.

@yuretsz 4 апр 2009 в 10:35

Иллюстрация в этой статье была бы очень кстати. А то заголовок «Красивые кнопочки», а убедиться в этом предлагается взглянув на код.

@Supercharged 4 апр 2009 в 11:15

В итоге вместо красивейших кнопок OS X, приходится видеть какое-то потребное говно, нарисованное кем-попало. Чем это говно лучше, кроме того, что туда можно вставить ушлепишную пиктограмму?

@nfx 4 апр 2009 в 11:24

не у всех есть OS X… видимо цель — виглядеть одинаково. на любой платформе.

@WebSinner 4 апр 2009 в 11:51

Если честно перый раз подобное увидел гдето в 2003 году и тогда еще эту конструкцию гордо обозвали «Двойные двери» (убейте не знаю почему) ее минусы заметны, даже очень, первое это гиганто подобная картинка, второе она не будет тянутся бесконечно и третье использует лишний js для обработки в css div:hover и тп…

я самже использую собственую надумку которою возможно придумал не один я и я не первый до нее допер, код исходный выглядит примерно так и кстати количество картинок леггко сокращается до 1,

<a href="#">текст</a>

кому интерестно могу продробно расжевать принцип/

@nfx 4 апр 2009 в 12:03

левые края размешенны в файле под правыми? (LLLRRR)

@kpumuk 4 апр 2009 в 12:52

Во-первых, не двойные. Sliding переводится как «скользящие». И логика в этом есть.
А во-вторых, в вашем случае один из тегов лишний :-) Хватает двух тегов, одной картинки и никаких javascript'ов.

@WebSinner 4 апр 2009 в 13:38

Да? ну и поведайте миру пожалуйста как использовать кнопку с разными краями и для этого всего использовать только один тег? Я имеею виду кнопку с не сплошным задним фоном а красочным разрисованым… а? Помойму никак, вообще. три элемента и три тега все правильно.

Если расматривать меню хабры то там достаточно двух элементов так как задний фон статичен и полностью одного цвета.

@kpumuk 4 апр 2009 в 13:41

Я нигде не говорил про один. Нужно два тега. Я всегда использую
<a href="#">Нажми меня</a>

А три тега, как у вас, явно перебор.

@WebSinner 4 апр 2009 в 13:43

Я про кнопку которая будет тянутся вплоть до бесконечности и для которой картинка будет минимального размера, а не подогнутая под максимальную ширину.

@WebSinner 4 апр 2009 в 13:48

не один… два (оговорился), но суть не меняется, поведуйте? Как у автора поста? так там ограничение по ширине.

@Sabiko 4 апр 2009 в 15:16

Ограничение по ширине не смертельно. Несколько байт добавляющегося веса — тоже. В отличие от лишней разметки.

А если фон однородный и сменят его разве что вместе со всем дизайном, включая кнопки — то спокойно можно обойтись одной картинкой.

НЛО прилетело и опубликовало эту надпись здесь

@kolyuchii 7 апр 2009 в 07:21

Вообсче я думаю разумным использовать вообще один тег и применять к нему before и after. Это работает во всех современных браузерах. Для старых версий ИЕ в этом случае можно применить insertAdjacentHTML. Рано или поздно все браузеры будут поддерживать псевдоклассы.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий