Генератор стильных кнопок на CSS 3 — css3button.net + полезный хак для кнопок

Существует множество веб-сервисов, без которых вполне себе можно обойтись в разработке, но при их использовании работа идёт намного быстрее. Одни из таких сервисов — генераторы кода CSS. Они позволяют сгенерировать код стиля, использовать живой предпросмотр результата и многое другое. Я не считаю целесообразным использовать генераторы, например, для закругления углов (border-radius: их можно настроить «ручками» быстрее — через Файрбаг в Файрфоксе или инструменты разработчика в Хроме) и некоторых других вещей. Но в макетах часто встречается оформление кнопок, которое нужно скопировать или сделать самому — в таком случае я использую сервис css3button.net.

Этот сервис позволяет получить код кнопки, настроив некоторые её параметры: здесь можно настроить закругление углов, рамку, отступы, цвета (градиентная и обычная заливка) и многое, многое другое. В живом режиме вы видите, как изменяется ваша кнопка, а CSS-код можно «забрать» в блоке справа. Сервис очень удобный и крутой, учитывая то, что все свойства будут кроссбраузерны (добавляются свойства с -moz и -webkit). Могу дать совет — из получившегося кода удаляйте, не думая ни секунды, свойства -moz-border-radius и -webkit-border-radius: сейчас просто border-radius работает везде.

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

Пусть при наведении мышки на кнопку изменится курсор, а также прозрачность кнопки (конечно, можете заменять button на всё, что угодно, например, если у вас оформлена ссылка как кнопка):

button:hover {
opacity: 0.8;
cursor: pointer;
}

Вы можете изменять значение opacity от нуля до единицы, зная, что 0 — это абсолютно прозрачный элемент, а 1 — абсолютно непрозрачный (нормальное состояние).

Теперь про клики. Оформляя крутые и стильные кнопки, многие разработчики и верстальщики часто забывают о почти что самом главном (помимо внешнего вида): действия после кликов. Пользователь должен видеть, что нажатие на кнопку произошло: это поможет избежать повторных нажатий. С помощью относительного позиционирования и смещения на один пиксель вниз и вправо мы покажем посетителям, что нажатие произошло. Смещение будет производиться только в момент нажатия.

button:active {
position:relative;
top: 1px;
left: 1px;
}

С помощью этих двух советов вы улучшите юзабилити ваших кнопок. И, конечно, не забывайте оформлять их красиво с помощью css3button.net: ведь кнопка, если она сделана красиво, так и будет просить, чтобы на неё нажали.