Налаштуйте вигляд кнопки та отримайте HTML і CSS для використання на вашому сайті. Почніть із пресету, відрегулюйте типографіку, кольори, форму та тіні, а потім перегляньте стани взаємодії перед експортом.
Переглядайте пресети 44 у колекціях Everyday, Classic, Shaped, Expressive, Gradients та Elite. Кожен пресет — це відправна точка, яку можна редагувати.
Як пресети впливають на ваш дизайн
Спочатку оберіть, потім налаштуйте
Використовуйте колекцію стилів, щоб звузити вибір у галереї. Застосування пресету замінює стилі за замовчуванням та при наведенні, зберігаючи при цьому текст кнопки та назву класу.
Спробуйте просту суцільну заливку, заокруглені кути, чіткий контур або більш декоративне оформлення. Знайшовши потрібний напрямок, використовуйте інші вкладки, щоб адаптувати деталі під вашу сторінку.
Зробіть підпис доречним
Встановіть текст кнопки, гарнітуру шрифту, розмір, насиченість, інтервали, висоту рядка, вирівнювання та колір тексту. Спостерігайте за оновленням підпису в процесі роботи.
Налаштуйте текст та відступи
Типографіка, що відповідає дії
Розділ «Текст» містить елементи керування шрифтом та друге поле для тексту кнопки. Розмір шрифту варіюється від 10 до 80 пікселів; вказані гарнітури використовують шрифти, доступні на пристрої відвідувача.
Використовуйте короткий підпис, що описує дію. У розділі «Заливка» горизонтальні та вертикальні відступи додають простір навколо тексту, не змінюючи його розмір. Перевірте, як виглядають довші підписи на сторінці, де буде розміщена кнопка.
Оберіть суцільну або градієнтну заливку
Використовуйте один колір фону або змішуйте два кольори за допомогою лінійного градієнта. Палітри кольорів та введення шістнадцяткових кодів дозволяють працювати візуально або з точністю.
Встановіть кольори та напрямок градієнта
Два кольори, один чіткий напрямок
У розділі «Заливка» змініть стиль на «Лінійний градієнт», щоб відкрити налаштування «Другий колір» та «Кут градієнта». Кут варіюється від 0 до 360 градусів.
Поля для шістнадцяткових кодів приймають повний шестизначний колір або тризначне скорочення. Перевірте білий або кольоровий підпис на обох кінцях градієнта; студія не перевіряє контрастність тексту автоматично.
Керуйте контуром та глибиною
Налаштовуйте зв'язані або незалежні кути, ширину та стиль межі, тіні блоку та тіні тексту. Надайте кнопці форму, що відповідає її контексту.
Досліджуйте кути, межі та тіні
Від чіткого прямокутника до м'якої пігулки
У розділі «Форма» залиште увімкненою опцію «Зв'язати всі кути» для спільного радіуса або вимкніть її, щоб налаштувати кожен кут окремо. Стилі меж включають суцільну, пунктирну, крапкову, подвійну, внутрішню, зовнішню, рельєфну, жолобчасту та відсутність межі.
У розділі «Тінь» встановіть горизонтальні та вертикальні зміщення, розмиття, колір та прозорість. Тінь блоку також має параметри розширення та перемикач внутрішньої тіні. Тінь тексту налаштовується окремо, тому ви можете додати глибини підпису, не змінюючи контур кнопки.
Спроектуйте також взаємодію
Редагуйте стилі «За замовчуванням» та «При наведенні» окремо. Попередньо переглядайте вигляд у станах «За замовчуванням», «При наведенні» та «Активний», а потім порівняйте кнопку на світлому та темному полотнах.
Розуміння станів редагування та попереднього перегляду
Два редаговані стилі, три стани попереднього перегляду
Стан редагування визначає, який стиль змінюють ваші елементи керування. Кнопки стану полотна лише обирають попередній перегляд. Наведення або натискання на попередній перегляд також демонструє його взаємодію.
Значення для наведення, що збігаються зі значеннями за замовчуванням, слідують за базовими редагуваннями, доки не будуть налаштовані індивідуально. Експортований CSS включає правило для наведення, коли це необхідно, контур фокусу, активний рух та правило зменшення руху.
Додайте CSS у свій проект
Скопіюйте згенерований CSS та відповідну кнопку HTML або завантажте таблицю стилів. Назва класу зберігає зв'язок між цими двома частинами.
Копіюйте, завантажуйте та зберігайте свою роботу
Простий код, який можна використовувати безпосередньо
Оберіть унікальну назву класу, скопіюйте CSS з відповідної вкладки, а потім скопіюйте кнопку з HTML. Завантаження зберігає файл .css, названий за класом; він не завантажує повну вебсторінку.
Попередній перегляд та генерація коду виконуються у вашому браузері. Студія намагається запам'ятати один чернетковий варіант у локальному сховищі браузера; експортуйте все, що хочете зберегти. Кнопка «Скинути» повертає студію до початкового стилю.
Текст та стилі на вході. HTML та CSS на виході.
Завантаження не потрібне. JavaScript забезпечує роботу живого редактора у вашому браузері. Скопіюйте HTML та CSS окремо або завантажте таблицю стилів CSS. Згенерований стек шрифтів використовує шрифти, доступні на пристрої користувача.
