CSS кнопки с помощью псевдо-элементов

[ddenisyuk]

Понимаю что пост не о дизайне, но кнопки в 3-м и 4-м примере очень понравились

[parfen]

их таааааааак приятно нажимать )

[easterism]

В 4-ом примере если нажать на стрелочку, уже не так приятно получается :)

[kolyuchii]

Мне кажется, что пост всё же о дизайне.

[Zibx]

Если отпустить мышь за пределами кнопок, то осуществляется неверное поднятие, в результате которого оно не происходит.

[ddenisyuk]

Взорвал мне мозг.

[Sterhel]

Отпустить мышь за пределами кнопок мыши, всё ок.

[smind]

в ФФ не всё ок, кнопка остаётся вдавленой

[admhome]

А Вы кнопку утаскивайте не только влево/вправо, но и вверх/вниз, у меня на опере баг проявился.

[Xazzzi]

Тестер интерфесов детегтед!

[Xazzzi]

интерфейсов, конечно же…

[Zibx]

Боже упаси, но обычно сам не оттестишь — завалят багами.

[bulletproofcupid]

Очень круто, спасибо большое! Открыл третий пример, жмякал по кнопочке и наслаждался.

[EvgeniyLazarev]

Сколько уже подобных однообразных постов было, и сколько ещё будет… Ни конца, ни края нет людской радости от изучения CSS3…

[michaelarshinov]

причем мы сейчас обсуждаем css 2.1 )) согласен что много подобных постов, но эта статься тоже интересная и немногословная

[jab]

> Ни конца, ни края нет людской радости от изучения CSS3…
Как будто что-то плохое.

[WorldCount]

Посмотрел в IE 9-ом, поржал :)

[resurection]

а мне грустно.

[WorldCount]

Смешно вот это:

«HTML5 является ядром Internet Explorer 9, а благодаря широкой поддержке таких веб-стандартов, как HTML5, CSS3, Canvas, SVG и многих других вам доступно больше инструментов для создания более прекрасного Интернета.»

msdn.microsoft.com/ru-ru/ie/aa740469

[zapimir]

А над чем ржать? Там вроде всё кроме градиентов (которые для каждого браузера свои прописываются, а для webkit'а еще и в двух экземплярах, автор спокойно мог добавить градиенты через filter).

Добивает, что для каждого свойства городят свои префиксы, ну сделайте что-то типа -beta-linear-gradient, -draft-linear-gradient, это же не они придумали это свойство, оно есть в черновике стандарта…

Кстати Opera 11.6 почему кружок со стрелкой прибила к верхнему краю.

[nick4fake]

Это очень логично, т.к. на стадии тестирование у каждого свои косяки. И если, например, хром нормально будет поддерживать super-property а опера его будет поддерживать частично (глючить), то мы не сможем включить его для хрома так, чтобы в опере было нормально.

[zapimir]

Имхо, от этого был бы толк, если бы новые версии браузеров не появлялись с такой частотой. А так на деле получается так пробуем свойство во всех браузерах основных, если более менее одинаково работает, то юзаем, если нет, просто откладываем на потом (я не говорю о тестовых сайтах, задача которых показать, как работает эта фича).
Косяки есть и сейчас причем на вещах которые якобы уже стандартны. Например, в Opera не пашет text-overflow: ellipsis для ячеек таблицы, в хроме тоже косяки с таблицами были, пришлось для хрома даже хак писать. Лучше бы сделали условные операторы как в IE, чтобы можно было без ручного определения браузера, и даже без JS, юзать разный код для разных браузеров.

[Softlink]

Фильтры в ИЕ ведут к прекращению работы border-radius у элемента. Так что тут надо выбирать: либо круглое, либо градиентное.

[nikitammf]

CSS Gradients for IE9 — и кругло и с градиентом.

А вообще есть полноценный сервис по создаю кроссбраузерных градиентов: Ultimate CSS Gradient Generator

[philpirj]

OMG, есть же Compass.

[philpirj]

И да, оно работает с IE.

[nikitammf]

Оно не работает с IE9, как писалось выше, фильтры не работают с border-radius, поэтому градиент необходимо делать через SVG.

[kolyuchii]

Чтобы было кроссбраузерно, надо делать картинками.

Но тоже придётся кое с чем мириться.

[adminimus]

>Посмотрел в IE 9-ом, поржал :)

залейте скриншот если не трудно, девятый ослик не у всех под рукой есть

[WorldCount]

Это 4-ый пример: habrastorage.org/storage2/a10/339/88f/a1033988f46656651dec9ae24e04cd82.png
Картинку нормально запилить не могу, карма.

Все 5-ть примеров выглядят одинаково :)
В «Представлении совместимости» так же ничего не меняется.

[Sterhel]

Надо сбацать музыкальный сайт с интерфейсом в виде стааааарой кассетной деки, где кнопки залипали, и использовать там данный пример.

[RubyRoid07]

Вот здесь есть неплохой пример: habrahabr.ru/blogs/css/105267/

[Xazzzi]

Шикаррно :) Особенно понравился пример 4 с демо-сайта, кликал минут 5.

[Xlab]

Прекрасно! Как бы не стало мэйнстримом…
А то все хорошие штуки начинают доставать, когда они на всех абсолютно сайтах/блогах/и.т.п.

[0n1y_0ne]

Охренительно! В 3 примере косячок с тенью от ненажимающегося элемента, да и вообще с тенями борщит порой автор, а в целом просто невообразимо красиво! Скорее бы вот так просто можно было все это использовать, без мозголомни с тем же IE.

[arty]

и на семантику плевать, конечно! главное, что можно кликать левой кнопкой!

[kolyuchii]

С семантикой всё в порядке. Такой приём довольно просто использовать для любого тега.

[arty]

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

[kolyuchii]

Умейте видеть суть вещей.

[kolyuchii]

Автор не заставляет делать кнопки из ссылок, не говорит, что это правильно. Он выложил идею.

Если капать глубже и перейти на иной уровень абстракции, можно понять, что всё очень даже семантично.

Судите сами: суть статьи — показать, что кнопки можно делать с помощью псевдоэлементов и одного тега. Один тег есть? Есть! Псевдоэлементы есть? Есть! Всё. Больше от этой статьи не требуется ничего.

[arty]

от этой статьи требуется больше. Требуется, чтобы сотни новичков-верстальщиков могли копировать из неё решение, которое не только работает, но ещё и правильное. А сейчас эти сотни новичков скопируют из неё не только «один тег с псевдоэлементами», но и использование ссылок в качестве кнопок. Я-то суть вещей увижу, а они — нет

[kolyuchii]

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

[kolyuchii]

Если уж так печётесь о новичках — накатайте годную статью о семантике. Для новичков это будет полезнее ваших комментариев.

[arty]

статей по семантике уже много, именно поэтому обидно видеть статьи по другим темам, где семантика игнорируется напрочь. А с подходом «никто не помрёт» российская милиция работает, только вот почему-то на него все жалуются

[kolyuchii]

Знаете, американская гуглопочта как-то живёт с не семантичными кнопками. И мы все как-то работаем с ней.

А про милицию — это вас занесло. Не при чём она тут.

[arty]

у гугла для семантики куча других атрибутов в кнопки напихана, хотя и фейлов у них достаточно. Можно сделать лучше.

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

[kolyuchii]

>у гугла для семантики куча других атрибутов в кнопки напихана
Каких? Кнопка — это или button или input. Всё остальное — не семантично.

Быть может и «новички», обчитавшись кучи статей о семантике, тоже напихают кучу других атрибутов?

[arty]

ясно, про wai-aria вы не слышали

новички не обчитаются, большинство новичков делает минимально необходимый с их точки зрения объём работы

[kolyuchii]

При чём тут это? Не путайте технологию с семантикой.

[arty]

об этом я уже не буду спорить
в любом случае можно делать лучше гугла

[kolyuchii]

Лучше можно сделать всегда. Но гуглопочта отлично работает уже сейчас.

[arty]

недостаточно хорошо для меня

[kolyuchii]

Тогда исправьте эту статью и отправьте в гугл. Я думаю, они сразу всё поймут и исправятся)

[kolyuchii]

>большинство новичков делает минимально необходимый с их точки зрения объём работы

Таким людям подобного рода примеры, что мёртвому припарка.

[arty]

то есть, из хороших примеров они не скопируют хороший код?

[kolyuchii]

Копируют, конечно копируют. Но не вдумываются. А просто копипастят. А то, что они напишут сами — ни от каких примеров не зависит. Т.е. опять же образовательный смысл примеров для «новичков» стремиться к нулю. А опытный разработчик, как вы сами заметили, и так всё поймёт.

[kolyuchii]

[kolyuchii]

Кто мешает добавит role к примерам в статье?
Зачем придираться к семантике, если на деле, она играет третьестепенное значение.

[kolyuchii]

Повесьте на эту ссылку переход по страницам. Делов-то!

[kolyuchii]

Смысл в том, что статья не о семантике, а о методе. Если голова есть — применишь правильно.

[kolyuchii]

А если статей дофига, зачем переживать. Интересующийся человек обязательно прочтёт их.

[arty]

заинтересовавшихся 10%, остальные 90% не разбираются, а копируют примеры, создавая таким образом большую часть веба. Поэтому и нужно примеры сразу делать правильными

[kolyuchii]

Остальные 90% перестанут верстать спустя первые полгода, а их проекты умрут ещё быстрее.

[arty]

это не так
вы оптимист

[kolyuchii]

Вы не сильно от меня отличаетесь. Примером в одной статье улучшить работу 90% верстальщиков.

[arty]

вы какие-то странные вещи вычитываете в моих буквах, дальше я с вами спорить не буду

[kolyuchii]

Хорошо, засчитаю ваши каменты как вброс)

[caffeinum]

А еще кнопку третьего типа можно использовать для счетчика каких-нибудь «лайков». Цифра удачно стоит)

[Night_Coder]

Ненавижу отсутствие :active у кнопок на многих сайтах.
Разве так трудно сделать эффект нажатия? Ведь так и хочется чтобы кнопка проваливалась, или меняла цвет…

[egge]

У вас там яндекс.метрика стоит, покажите карту кликов для 3его примера. Уж очень интересно…

[limon_spb]

Поддерживаю!
А в целом — красиво получилось! Однозначно +

[nabliker]

Не зря я ее все таки ее прикрутил :)



Всего кликов: 78600

[ruikarikun]

А как объясняются зеленые пятна в левой части?

[nabliker]

Видимо, там тоже кликали :)

[antonzaycev]

На пятой кнопке думаю не хватает при нажатии смещать текст вниз вместе с кнопкой, иначе теряется сам эффект «реалистичности» как на остальных 4-х кнопках.

[Gruxon]

Пример 3
Мне немного показалось не совсем логичным, то при нажатии на циферку, нажимается кнопка рядом, а циферка остается. ИМХО, не должно ничего происходить, только когда саму кнопочку нажмешь, тогда надо «нажиматься».

[maxvipon]

Поддерживаю. Мне тоже этот момент показался нелогичным. Совсем было бы круто, если бы циферка прибавлялась.

[eno_one]

а у меня в опере почему-то не всё ок с 4 примером :( стрелочки улетели вверх( ver. 11.60

[Dimoniusis]

Та же версия Оперы, та же проблема.

[agatische]

У вас примере кода для первой кнопки пропущена тень:

.a_demo_one {
    ...
    box-shadow: 0 1px 0 #7FD2F1 inset, 0 1px 0 #FFFFFF;
}

[Glivera]

Все красиво, спасибо за примеры.
Вот только если захочется прикрутить анимацию на CSS3 то придется отказываться от псевдоэлементов :(…

[Operatino]

Автору желательно бы указать об этом в посте, сам натыкался на подобный недостаток.

[nabliker]

Это написано в заключении.

[nabliker]

Ошибся, это написано в дисклеймере.

[PSNet]

Красиво. странно что даже ФФ3.6 косится на некоторые кнопки.

[PSNet]

там с padding что-то не то в ФФ3.6

[BlackGod]

Пример №2 — больше напоминает «рычаг», а не кнопку… а 3 и 4 — волшебны!

[Operatino]

Красивые кнопки, но прежде чем постить очередной пост о кнопках на CSS3, удивите народ, сделайте их хоть по всем правилам — clip2net.com/s/1tHso (ie7) обязательно учтите fallback для старых браузеров, понятно что там кнопки будут просто синими прямоугольниками, но кликаться вне области кнопки точно не должны.

[BlackGod]

ИМХО — старые браузеры должны умереть!

[Operatino]

Пусть там будет не красиво, но основые действия должны работать, IE7 еще 3%.

[timukas]

Оппа! Пошёл на сайт демо кнопки опнаживать и облом.

Виртуальный сервер salavat.me не существует или отключен.

[timukas]

опнаживать=понажимать

[kost]

Идите на оригинальный: tympanus.net/Tutorials/CSSButtonsPseudoElements/index2.html

[nabliker]

Добавил в пост работающие ссылки.

[philpirj]

Виртуальный сервер salavat.me не существует или отключен.

Положите на jsFiddle.

[nabliker]

Спасибо за совет, добавил ссылку в конце поста.

[nabliker]

Ну все, положили сайт :)

[timukas]

Чрезмерное нажатие на кнопки вызывает повышенный износ псевдо-элементов, а также может привести к поломке деталей сервера :)

[philpirj]

У меня (Linux, FF9):
— нет стрелки на 4й кнопке — на jsfiddle-то картинки нет. Решается использованием '→' в content, но стрелка при этом получается не по центру кружочка. Варьирование padding-top приводит к искажению кружка в эллипс;
— на 3й кнопке элемент :before выше, чем 'click me'. Варьирование font-size желаемого эффекта не дало.

[Janot]

Кнопки на столько приятны, что при нажатии вызывают улыбку.

[nabliker]

Хочу сказать спасибо всем, кто повышал рейтинг статьи, оставлял комментарии, плюсовал карму, мне это безумно приятно, так как я здесь совсем не давно, и, честно говоря, не ожидал такого хорошего отношения со стороны Хабражителей :)

Благодаря вам я получил годовую подписку на Букмейт, хотя сегодня сам хотел оплатить подписку на месяц :)

Постараюсь в дальнейшем радовать вас новыми переводами хороших статей :)

[cryingjoker]

сейчас разбираюсь с подобными тенями, поэтому вопрос: есть ли способ, чтобы это открылось на эксплорере ниже 9?
не подскажите?

[BReal]

Подскажите, а можно ли сделать (например во втором примере) так, чтобы в меню:


Home
Prices
Feedback



Ссылка active отображалась зажатой кнопкой. Т.е. на активной страничке кнопка зажата, а на остальных — выпуклая. При переходе на другую, другая становилась зажатой…

У меня не выходит :(

[BReal]

Хабр не позволяет теги вставлять =( Если можно в ЛС

Home
Prices
Feedback

[BReal]

Не знаю почему, но мои кнопки не всегда срабатывают. Бывает что нажимаешь по кнопке — анимация отображается, но на другую страничку не переходит. Opera + IE. Перемудрил наверное с подпиливанием под себя :(

[dom1n1k]

Стал разбираться, чтобы сделать себе подобные кнопки, и обнаружил серьезный баг.
Дополнительные элементы кнопок засунуты под основной блок при помощи «z-index: -1» — но это прячет их под фон контейнера, делая невидимыми.
В демке они видны только благодаря тому, что фон обрамляющего контейнера полупрозрачный. Но и то, он искажает цвета.
Выходит, что этим кнопкам обязательно нужна дополнительная обертка со значением z-index > 0