3D кнопки с помощью CSS3

[homm]

С ума сойти, с помошью ccs3 можно делать тени и градиенты. Почему вы раньше молчали?

[btd]

Это сарказм?

[homm]

Нет, что вы.

[Volshebnyi]

Следующая статья цикла будет именно об этом.

[TjRus]

а еще можно сделать iPhone на CSS3 ;) — habrahabr.ru/blogs/webdev/135349/

[lorndesign]

Уточните пжлст. iPhone 3 на CSS3? А на CSS4 — iPhone4?

[Aok]

Да ладно вам, это хороший пример использования возможностей.

[Dimox]

А вот мой вариант этих кнопок, выполненный в начале текущего месяца — http://dimox.name/examples/beautiful-3d-buttons-using-css3/, он ближе к PSD-исходнику, чем у tutsplus.

[avrelian]

У таких кнопок есть баг. Они иногда дергаются, если их нажать и, не отпуская, поводить указателем вверх-вниз.

[homm]

Подозреваю, что баг не у кнопок, а у браузера. Проверил в Опере, Хроме, Фаерфоксе — не дергаются. Правда ведут себя по-разному. В Фаерфоксе остаются нажатыми, когда уводишь курсор за границу, в Опере не поймешь (градиент не меняется, текст меняет положение), в Хроме состояние меняется полностью

[avrelian]

Даже не у браузера, а у двух браузеров и одной операционной системы (Chrome и Safari на Mac OS X 10.6.8).

[homm]

В OS X 10.7 все нормально.

[avrelian]

Вообще-то, на Chrome 16 в Windows XP SP3 тоже так. У Вас какая версия?

[homm]

Windows XP SP3 на виртуалке, Хром 12, потом обновился до 16. А опишите, как именно «дергается»?

[avrelian]

С частотой от 1 Гц до 10 Гц переходит из положения «нажато» в положение «отжато». Если указатель двигать ооочень медленно (по пикселю), то не дергается.

[homm]

Если просто нажать и водить вверх-вниз (хоть быстро, хоть медленно), ничего такого нет. Если водить по верхней кромке толщиной 2-3 пиксели влево-вправо, тогда такой эффект есть.

[avrelian]

У меня есть и тот, и другой эффекты.

[Dimox]

Чтобы в Опере при нажатии на кнопку текст не сдвигался, можно использовать вот такое решение (выявил методом тыка):

.submit:after {
content: '';
}


[Khoth]

Мне кажется самый главный «баг» таких кнопок — фиксированная ширина.

[homm]

В смысле?

[eno_one]

у меня в опере дёргаются. надписи, а не сами кнопки

[hf35]

ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

Svg фон ему. И опере заодно.

[Kirhgoff]

Ого, какие штуки можно засовывать в стили. А как такое править? Или заново написал SVG-код, закодировал в base-64 и просто поменял?

[hf35]

ну в общем да. Вряд ли менять градиенты нужно хоть сколько нибудь часто. Иначе можно вытащить скрипт наверное)

[Dimox]

Надо будет попробовать. Спасибо за подсказку и за отзыв!

[walkman7]

Спасибо за ссылку, так как действительно результат (в статье) совсем не тот что в исходнике.

[faiwer]

Стоило бы добавить блокировку выделения текста. Хотя, конечно, это вопрос спорный. Я достаточно часто в таких (и не только) кнопках вместо нажатия — случайно выделяю текст. Полагаю, что я не 1 такой :)

[egorinsk]

Это конечно хорошо, что автор освоил часть HTML5 и CSS3, но почему бы ему еще не заглянуть в HTML4.01 и посмотреть, каким тегом делаются кнопки.

Хотя возможно, конечно, автор хотел сделать именно ссылку. Странно, правда, что в виде кнопки.

Еще. Уважаемые верстальщики! Если вы пишете (a href="#") или (a onclick=«return false») или (a href=«javascript:void(0)»), то вы неграмотные верстальщики.

[kolyuchii]

А каков способ по вашему годен?

[ozoned]

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

[egorinsk]

Input (type: button/submit), Button. Но тут есть подвох: некоторые браузеры, во-первых, добавляют неубиваемые рамки, во-вторых, все браузеры по-разному выравнивают кнопку с соседним текстом (при разных значениях vertical-align).

Поэтому, в силу кривизны рук и несогласованности производителей браузера и спецификации, допустимо делать кнопки с помощью тегов span или div. НО! В этом случае вы должны предотвращать выделение текста, например при клике или двойном клике (если использовать input/button, такой проблемы нет). Если вы думаете «ну кто же будет дважды кликать по кнопке» — поверьте, вы плохо знаете пользвоателей. Будут, еще как.

Если же вы ставите тег a, это знаичт, вы хотите сделать ссылку, и она должна куда-то вести, а не ссылаться на несуществующую (и не прописанную никакими стандартами) на страницу javascript:void.

[egorinsk]

У button есть еще одна проблема, это vertical-align, который одну и ту же кнопку в разных браузерах выравнивает по-разному. У меня вообще такое ощущение, что в итоге получился неюзабельный тег.

Потому я сам предпочитаю input:submit, завернутый в спан с display:inline-block и кучей ins для декораций.

[egorinsk]

Для традиционных методов изготовления теней и уголков.

[ambientos]

<a href="#link" onclick="do(); onclick false;">link</a>
так?

[S0ulReaver]

Блин, мне показалось что на CSS такую кнопочку сделать проще чем красиво в PhotoShop -_-. Дожил.

[tnz]

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

[Stepler]

Комментариев не много, но в избранное добавлено более 400! На порядок больше. Показатель!

[csscat]

У меня у одного в Chrome эти кнопки выглядяит не так как на PSD?
Chrome 17.0.963.38 beta

[sofcase]

Делал что-то похожее тут sofcase.net/post/one-more-buttons-for-a-dark-background-on-css3/ и еще тут sofcase.net/post/buttons-for-white-background-with-css3/ :)

[sofcase]

Кстати, среди этого делал еще и Google подобные кнопки sofcase.net/post/buttons-as-a-new-interface-from-googleplus-using-css3/ :)

[tolyjan]

в ff наблюдаю интересный эффект:
1. Нажимаю на кнопку, в нажатом состоянии увожу курсор
2. Переключаюсь на другую вкладку в браузере
3. Переключаюсь на вкладку обратно и нажимаю на ту же кнопку

в .ds-button не хватает стиля outline: none;

[kokis]

Тоже хотел перевести этот туториал, но как посмотрел демо в хроме — сразу передумал.

[ChemAli]

Надо еще сделать outline: none чтобы пунктирную обводку после клика убрать.

[mishael]

Обожаю CSS3, жаль что эти кнопки в виде PNG занимают меньше байт и времени, чем css код для их рисования.

[sofcase]

Зато не делает лишний запрос к серверу :)

[sofcase]

А по времени по сути столько же наверно :)

[ibo_losig]

Здается мне, что основная проблема этих кнопок — фиксированная ширина. Именно по этому на них можно долго смотреть, но использовать почему-то не хочется.

Я решал эту проблему с красотами, но решение свелось к кнопке в двух обертках: в первой была ее «трехмерная часть», во второй — «навершие». Я пытался использовать :before и :after, но не смог привязать ширину псевдоэлемента к ширине кнопки, не укладывая их в один контейнер. Может, мало пытался.

[BReal]

Может мне какой-нибудь гуру помочь с css кнопками? Я установил их на свою простенькую страничку, подредактировал цвета. Немного поигрался с тенями и элементами active, hover. Короче сейчас они работают не всегда — бывает нажимаешь на кнопку, а она кроме анимации нажатия/отжатия ничего не делает. a href не срабатывает :( После 3-4 клика опять начинает работать…

Кому не лень, помочь?