Генератор кнопок как инструмент веб-разработчика

При создании и верстке сайта перед веб-разработчиком нередко возникает задача создания кнопок. Даже на одну уходит довольно много времени, так как необходимо, чтобы кнопка соответствовала общему дизайну сайта. И если требуется создать не одну кнопку, а 10 или 15, то на это может уйти целая «вечность». К тому же, работа эта довольно однообразна и скучна, и чтобы облегчить жизнь верстальщикам был разработан генератор кнопок.

Что такое генератор кнопок?

Генератор кнопок – это программа, которая в интерактивном режиме позволяет создавать и выбирать внешний вид кнопки с помощью различных настроек.

Такие программы в большинстве своем работают как онлайн генератор css кнопок, то есть пользователю не нужно ничего скачивать и устанавливать на свой ПК. Он может зайти в интернет и воспользоваться одним из специализированных сервисов, в которых за несколько минут можно создать необходимое количество кнопок различного вида.

Результатом работы таких программ является сгенерированный из установленных пользователем параметров css–код, который копируется и вставляется в документ со стилями сайта. Таким образом, генераторы упрощают процесс и экономят время при разработке кнопок.

Обзор популярных генераторов

Далее в статье будет представлен обзор онлайн-сервисов, генерирующих кнопки для сайтов.

Cssdrive

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

Далее будут описаны параметры, и то, как они влияют на внешний вид кнопки.

Текст и шрифты (Text & Fonts). В этой вкладке настроек можно установить следующие параметры:

• Название кнопки (Button Label) – текст, введенный в это поле, будет отображен на кнопке;
• Цвет (color) – в этом пункте настраивается цвет текста;
• Размер шрифта (font size) – можно настроить, введя числовое значение, или же установив ползунок в нужно положение;
• Семейство шрифта (font-family) – в этом поле можно выбрать шрифт;
• Декорация текста (text-decoration) – в выпадающем меню представлены варианты расположения линии относительно текста: под текстом, над текстом, перечеркнутый текст;
• Тень (text-shadow) – в этом пункте можно выбрать цвет тени, ее расположение по оси х и у, а также размытость (blur).

Для активации доступа к этим настройкам необходимо поставить галочку справа от этих пунктов, как показано на изображении ниже:

Следующая вкладка настроек называется Фон (Background). На ней представлены следующие параметры:

• Цвет фона (Background color) – здесь можно выбрать «Однотонный» (Flat) или «Градиентный» (Gradient);
• Конечный цвет (end-color) – если был выбран градиент, то этот параметр установит цвет, в который будет переходить фоновый цвет;
• Тип градиента (gradient-type) – настройка перехода цветов;
• Радиальный размер градиента (radial-gradient-size) – выбор размера градиента;
• Угол градиента (gradient-angle) – настройка угла градиента;
• Ширина и высота (width, height) – с помощью ползунков или установив числовое значение, можно настроить ширину и высоту кнопки;
• Отступ (padding) – с помощью этого параметра можно настроить расстояние от текста до границ кнопки;
• Размеры фона по осям (background-size-x, background-size-y) – если вначале был выбран градиент, то эти параметры влияют на его отображение, а именно размер:

Следующая вкладка Границы (Border) отвечает за следующие параметры:

• Радиус границ (border-radius) – отвечает за закругление границ кнопки;
• Ширина границы (border-width) – изменяя значение или прокручивая ползунок вы измените ширину границы кнопки.

Стиль границы (border-style) – в выпадающем меню представлены три стиля:

• Цвет границы (border-color) – выбор цвета границы;
• Тень кнопки (box-shadow) – данный пункт отвечает за настройку цвета тени кнопки, ее смещение по осям, а также за размытость тени:

Вкладка настроек «Трансформация» (Transform) – отвечает за расположение и вид кнопки на плоскости.

Управляя ползунками кнопку можно растянуть, сжать и повернуть относительно осей x и y:

Вкладка настроек «Переход» (Transition) отвечает за изменение вида кнопки при наведении и нажатии на нее. Чтобы установить параметры для активированной кнопки необходимо поставить галочку в CSS Setting (:hover) и провести необходимые настройки:

Когда настройка параметров закончена, можно скопировать готовый CSS3–код и использовать его при разработке сайта. Блок с кодом находится ниже на странице генератора:

Разобравшись с настройками этого сервиса, для пользователя не составит труда использовать любой другой css генератор кнопок, например такой, как Css-tricks Button maker.

Css-tricks Button maker

Для начала роботы с генератором необходимо перейти на соответствующую страницу. На ней представлены настройки, которых заметно меньше, чем в предыдущем сервисе:

В правой части представлены три ползунка, которые отвечают за размеры кнопки, а ниже представлены уже знакомые настройки: цвет верхнего и нижнего градиентов, цвет границы, фоновый цвет после наведения курсора, цвет текста, цвет текста после нажатия.

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

Откроется окно, из которого его можно скопировать:

Следующий в списке генератор кнопок для сайта Uiparade.

Uiparade

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

Ниже представлены настройки для трех состояний кнопки:

• Неактивное состояние (Normal State);
• Наведен курсор (Hover State);
• Кнопка активирована (Pressed State):

Этот генератор отличается от ранее описанных тем, что он имеет функцию генерации HTML–кода, которой не было у предыдущих сервисов.

Чтобы получить CSS, необходимо кликнуть по кнопке, после чего откроется окно с кодом:

Если же веб-разработчику необходимо использовать кнопки, которые бы были связаны с социальными сетями, то на это случай также есть решение – генератор социальных кнопок, работа с которым будет описана на примере сервиса Pluso.

Pluso – генератор социальных кнопок

Для начала работы нужно перейти по ссылке. Затем выбрать стиль кнопок, социальные сети, которые должны присутствовать в блоке. Их можно выбрать из списка справа:

Прокрутив страницу ниже, можно увидеть область предварительного просмотра, а справа от нее - параметры для настройки формы:

После того, как процесс настройки завершен, можно скопировать готовый код и вставить его в HTML–документ:

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

Так как в данной статье речь идет о кнопках, то найти информацию об их создании можно на странице CSS этого сервиса в разделе «Кнопки»:

Генератор кнопок значительно облегчает работу веб-разработчика и экономит его время. В интернете представлено большое количество сервисов, которые сделают за пользователя черновую работу. Это касается как обычных, так и социальных кнопок. При использовании этих генераторов знания в области верстки не обязательны, что удобно для начинающих, которые делают первые шаги в этой сфере.

Для продвинутых пользователей, которые желают разобраться в том, как создавать кнопки, представлен сервис Bootstrap, который освещает всю необходимую информацию для верстки веб-страниц.