Цей приклад використовує лише елементи керування генератора. Зображення вище показують фактичні завантажені таблиці стилів, застосовані до звичайних кнопок HTML, а не скріншоти редактора.
Почніть із Signature
Відкрийте генератор кнопок CSS. У розділі Presets виберіть Signature з колекції Everyday. Встановіть текст кнопки «Get started». У полі коду встановіть назву класу cta-button.
Пресет замінює стилі за замовчуванням та стилі наведення, тоді як ваша мітка та назва класу залишаються. Виберіть початкову точку перед внесенням детальних налаштувань.
Назва класу з'єднує правила CSS з вашою кнопкою HTML. Генератор очищає непідтримувані символи; використовуйте коротку, виразну назву, щоб уникнути стилізації непов'язаних елементів.
Створіть градієнтну пігулку
Залиште стан редагування (Editing state) на Default. У розділі Text виберіть System sans, розмір шрифту 18 пкс та накреслення Bold. Залиште білий колір тексту, звичайний стиль, вирівнювання по центру та висоту рядка 1.4.
У розділі Fill виберіть Linear gradient. Використовуйте два кольори та кут нижче. Встановіть горизонтальний відступ 32 пкс та вертикальний відступ 16 пкс. У розділі Shape залиште увімкненим Link all corners і встановіть радіус кута 100 пкс. Ширина межі залишається 0 пкс.
У розділі Shadow залиште увімкненим Box shadow. Використовуйте горизонтальне зміщення 0 пкс, вертикальне зміщення 8 пкс, розмиття 24 пкс, розширення −4 пкс, колір #460BD8 та непрозорість 32%. Залиште Inset shadow та Text shadow вимкненими.
Відступи змінюють простір навколо тексту. Радіус кута змінює контур. Великий радіус створює форму пігулки, не роблячи мітку ширшою.
Надайте наведенню власну обробку
Перемкніть стан редагування на Hover. У розділі Fill змініть колір фону на #33099E, а другий колір на #6D20BF. Залиште кут градієнта 135°. У розділі Shadow змініть вертикальне зміщення на 10 пкс, а розмиття на 28 пкс. Інші налаштування залиште без змін.
Використовуйте кнопки Default, Hover та Active на полотні, щоб перевірити кожен стан. Ви також можете навести курсор або натиснути кнопку попереднього перегляду. Змінюйте полотно між світлим і темним режимами, щоб перевірити краї та тінь.
Стан редагування вибирає, які стилі ви змінюєте. Стан полотна змінює лише те, що ви бачите в попередньому перегляді. Поверніться до редагування Default перед налаштуванням вигляду у стані спокою.
Властивості наведення, які все ще збігаються зі значеннями за замовчуванням, слідують за подальшими змінами за замовчуванням. Після того, як ви налаштуєте властивість наведення, вона залишається незалежною. Перевірте обидва стани після зміни базового стилю.
Експортуйте та протестуйте на своїй сторінці
Виберіть вкладку CSS і скористайтеся Copy CSS, або виберіть Download, щоб зберегти cta-button.css. Виберіть вкладку HTML і скопіюйте відповідну розмітку кнопки. HTML містить ту саму назву класу та кнопку з типом "button".
Додайте CSS до своєї таблиці стилів або підключіть завантажений файл зі своєї сторінки. Розмістіть HTML там, де має бути кнопка. Два експорти працюють разом: кнопка HTML сама по собі не містить стилізації.
Відкрийте сторінку та протестуйте її стани за замовчуванням, наведення, фокусу клавіатури та натискання. Експорт включає контур focus-visible, невеликий рух при натисканні та правило зменшення руху. Ваші навколишні стилі та встановлені шрифти все ще можуть впливати на результат.
Згенерована кнопка — це стилізований елемент керування. Підключіть її поведінку при натисканні у своєму проєкті; використовуйте правильний тип кнопки при додаванні її до форми.
cta-button.css
Назва завантаженого файлу відповідає назві класу.
Поширені запитання
Чи потрібен мені фреймворк CSS?
Ні. Результатом є стандартний CSS плюс звичайна кнопка HTML. Вставте CSS у свою таблицю стилів і використовуйте відповідний клас для кнопки.
Чи зберігає Download також HTML?
Download зберігає файл .css, названий за назвою класу. Скопіюйте розмітку кнопки окремо з вкладки HTML.
Чи можу я надати кожному куту різний радіус?
Так. У розділі Shape вимкніть Link all corners, а потім встановіть Top left, Top right, Bottom right та Bottom left незалежно. У цьому прикладі вони залишаються пов'язаними для форми пігулки.
Чи залишиться мій дизайн тут наступного разу?
Студія намагається зберегти поточну чернетку в локальному сховищі цього браузера. Це не обліковий запис і не резервна копія для різних пристроїв. Налаштування браузера, очищення даних сайту або скидання можуть видалити чи замінити її, тому експортуйте роботу, яку хочете зберегти.
Чи завантажується моя кнопка на сервер?
Попередній перегляд стилю та генерація CSS/HTML виконуються у вашому браузері. Редактор не завантажує текст вашої кнопки чи чернетку стилю для створення експорту.
Надайте своїй наступній кнопці власний стиль.
Оберіть відправну точку, налаштуйте деталі та додайте код у свій проєкт.