Предлагаются лёгкие кнопки «Дальше» (оптом, недорого)

Поначалу введение кнопок, заметно выпадающих из дизайна по своим размерам, встретила массу осуждений в топике, посвящённом обновлению сайта 22 мая. Представитель Хабра Boomburum вполне с этим согласен и предлагает дизайн кнопки отправлять ему на личное сообщение. Однако, красивость одного решения, которое созрело в течение дня, предлагаю оценить всем.

Картинка для привлечения внимания:

Первым желанием и действием было полное убирание признаков кнопки, поскольку среди текста кнопка выглядит несоответственной. Подумав над целями введения кнопки (чтобы она отличалась от простой ссылки и чтобы её CSS-переход нельзя было подделать простой картинкой), нашёл решение, удовлетворяющее всем требованиям — и компактное, как текст, и похожее на кнопку, и с CSS-переходом. Получилось решение, настолько органично укладывающееся в прежнюю идею ссылки, что решил поделиться им со всеми через короткое видео — чтобы смотрелись переходы, а не только с теми пользователями, которые установили юзерстили ZenComment, в которых такие прозрачные кнопки имеются с вечера 22 мая (версия скрипта 2.42).

Видео (4 мин, без звука).

Сравнивается дизайн и анимация кнопок стандартного дизайна на месте ссылки «Читать далее» (первые 2 мин.) и компактных прозрачных кнопок (далее от 2:04). 3:07 — те же кнопки при HabrAjax + ZenComment. Оно даёт некоторое приблизительное представление, как воспринимаются те и другие кнопки в действии. Очень приблизительно, из-за различных задержек видео и прокрутки при снятии скринкаста. Исходный размер был 640 на 480, так что в остальном сравнительно качественно, если смотеть на полный экран.

(Прежнее видео по стилизатору — предшественнику ZenComment не потеряло своего значения и сейчас и сделано куда интереснее, с музыкой, 8 мин.: www.youtube.com/watch?v=nBmTcN7mP-c .)

Что видим в случае длинной кнопки:

Что наблюдается при наведении мыши:

Переделать имеющийся дизайн кнопок в представленный на видео — дело не более 20 минут для верстальщика (плюс пару часов на тестирование во всех браузерах). Думаю, многие поддержат установку именно такого вида кнопки, и вопрос с кнопкой в течение дня (в случае принятия решения администрацией) будет решён.

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

/** haButtons v1_2012-05-22, FF3.6+, Opera11+, Safari5, Chrome, IE9
 * Author: spmbt, http://spmbt.habr.ru/
 */
<hh user=namespace> url(https://www.w3.org/1999/xhtml);<hh user=-moz-document> domain("habrahabr.ru"){
.buttons a.button,
.buttons input:disabled:active,
.buttons input{padding:0 10px!important}
.post .content .buttons{
	display:inline-block!important;padding:0!important}
.post .content .buttons a.button{
	margin-left: 2px!important;
	padding:0 2px 1px!important;
	border:0!important;
	border-radius:2px!important;
	background:transparent!important;
	color:#6da3bd!important;
	box-shadow: 0 0 2px rgba(255,255,255,0.4) inset, 0 0 2px rgba(0,0,0,0.2)!important}
.post .content .buttons a.button:hover{background:#f4f4f9!important}
}

Чтобы эти стили использовать не в Firefox, нужно взять правила внутри фигурных скобок после слов "@-moz-document". Для Firefox — скопировать весь код в новый юзерстиль аддона Stylish.

(Пост помещён не в хаб-оффтопик «Хабрабхабр», чтобы стилем могли воспользоваться неавторизованные пользователи, которым доступна кнопка «Дальше».)

Автор: spmbt