Анимированные кнопки произвольной ширины на CSS3

[VoVanJinn]

Имхо анимация слишком быстрая.

PS: Каммент к демке " ╭∩╮（︶︿︶）╭∩╮ "

[bisserof]

Владимир, так лучше по-человечески это написать, вместо ни о чем не говорящих карикатур.

[VoVanJinn]

Нет нет, эта карикатура не выражает мое мнение, наоборот, мне вполне понравилось, только анимация слишком резкая.

[bisserof]

Исправил на более плавную анимацию, спасибо за фидбек.

[Efsi]

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

[bisserof]

да, ты прав, это видимо из-за отсутствия вертикальной полосы :) исправил.

[Akuma]

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

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

[bisserof]

Исправил.

[bisserof]

проверь сейчас, должно быть норм.

[bisserof]

Имхо для эстетики, иначе зачем вообще выпендриваться со стилями и просто использовать обычные нативные кнопки.

[Barkov]

Здесь эстетика ради эстетики. В данном случае удобства она не несёт. И даже наоборот отвлекает, как и сказал выше товарищ Retarded. Я подношу мышку к кнопке, чтобы нажать, а получаю в ответ анимацию, которая отвлекает моё внимание, затягивает нажатие.

[bisserof]

Верно подмечено, но нужно выбирать между нескольких зол когда есть утвержденный дизайн или есть потребность разгрузить визуальное пространство на сайте, или когда хочется сделать что-то красивое на сайте чтобы придать отличительную черту или особенность.
Хочу обратить внимание — кейс с кнопками не ограничивает нас в использовании этого приёма.

[dshster]

<span class="button_icon"></span> вот этот пустой код лишний, чем вас :after :before не устраивает, раз вы делаете все по современным правилам?

[bisserof]

Несомненно я начинал делать с :before и :after, но в процессе выяснил что на данный момент эти спевдоэлементы не поддерживают transition. И это несомненный fail =\

[bisserof]

Спасибо! Не знал.

[Serator]

Да ладно? Уже не раз обсуждалось сие на хабре. Firefox вполне поддерживает анимацию псевдо элементов (кстати, правильнее с двумя "::" писать), а у Chrome'а уже тона прошений пользователей к разработчикам, чтобы решили сей вопрос…

[Pozadi]

Не то чтобы это не работало, но все таки работает не совсем так как задумано. Анимация разгоняется так, будто собирается перейти от 32px до 960px, но потом резко прерывается (когда контент уже помещается). В итоге анимация заканчивается быстрее, и функция смягчения искажается (от нее берется как бы кусок).

Чтобы минимизировать этот эффект нужно наоборот указывать max-width как можно меньше.

[bisserof]

Всё верно, я думаю над вариантом выставления значения max-width функцией attr(), которая будет брать значение из аттрибута тэга. В этом случае есть минус — придется использовать немного javascript'a.

[Serator]

Так это ведь нигде не работает, так что и смысла пробовать в данный момент нет.

[bisserof]

Кхм-кхм, в каком это смысле нигде не работает?

Internet Explorer 8.0+
Chrome 2.0+
Opera 9.0+
Safari 3.1+
Firefox 1.0+
Android 1.0+
iOS 1.0+

[Serator]

Там таблица из 3-х строк, прочтите нижнюю ;).

[bisserof]

в этом случае первая строчка, то есть «Basic support» меня устроит, так как я буду брать строковое значение аттрибута и вставлять его в псевдоэлемент через свойство content

[Serator]

А как выставить значение свойства «max-width» CSS-функцией attr() тогда?

[ironviper]

А как делается вращение?

[bisserof]

Используя свойство transform: rotate(360deg);

[Serator]

На самом деле решение далеко не новое и это не решение проблемы, а костыль, ибо вместо анимирования за n времени у вас получается анимирование с n скоростью, да и свойство «min-*» в большинстве подобных случаях подбирается на глаз и вполне себе не резиновое, что опровергает заголовок статьи (произвольной ширины...) :).

[lvivski]

А где же ширина произвольная, если она жетская в пикселях?

[mapron]

Применимо не только к этому топику, а вообще к таким всем демкам на «чистом CSS3!»
у меня в браузере отключен javascript по умолчанию (NoScript), мне не трудно включить конечно, но когда ждешь этот самый чистый CSS, то странно видеть что выключенном JS не отображается вообще ничего.
Просто не первый раз уже на хабре, вот решил выразить недовольство в комментариях.