Генератор кнопок як інструмент веб-розробника, вебмайстру

При створенні і верстці сайту перед веб-розробником нерідко виникає завдання створення кнопок. Навіть на одну йде досить багато часу, так як необхідно, щоб кнопка відповідала загальному дизайну сайту. І якщо потрібно створити не одну кнопку, а 10 або 15, то на це може піти ціла «вічність». До того ж, робота ця досить одноманітна і нудна, і щоб полегшити життя верстальщикам був розроблений генератор кнопок.

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

Генератор кнопок - це програма, яка в інтерактивному режимі дозволяє створювати і вибирати зовнішній вигляд кнопки за допомогою різних налаштувань.

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

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

Огляд популярних генераторів

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

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

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

Текст і шрифти (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

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

У правій частині представлені три повзунки, які відповідають за розміри кнопки, а нижче представлені вже знайомі настройки: колір верхнього і нижнього градієнтів, колір кордону, фоновий колір після наведення курсору, колір тексту, колір тексту після натискання.

Щоб згенерувати код, необхідно просто клікнути по створеної кнопці.

Відкриється вікно, з якого його можна скопіювати:

Простий і зручний у використанні конструктор кнопок. Праворуч розташовані настройки, в яких можна встановити наступні параметри: назва кнопки, відступи, розмір, закруглення граней, ширину кордону:

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

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

Цей генератор відрізняється від раніше описаних тим, що він має функцію генерації HTML-коду. якої не було у попередніх сервісів.

Щоб отримати CSS. необхідно клікнути на кнопку, після чого відкриється вікно з кодом:

Після того, як процес налаштування завершено, можна скопіювати готовий код і вставити його в HTML-документ:

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

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

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