При створенні і верстці перед веб-розробником нерідко виникає завдання створення кнопок. Навіть на одну йде досить багато часу, так як необхідно, щоб кнопка відповідала загальному дизайну сайту. І якщо потрібно створити не одну кнопку, а 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, який висвітлює всю необхідну інформацію для верстки веб-сторінок.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here