В этом примере используются только элементы управления генератора. Изображения выше показывают реальные скачанные таблицы стилей, примененные к обычным кнопкам HTML, а не скриншоты редактора.
Начните с Signature
Откройте генератор кнопок CSS. В разделе «Пресеты» выберите 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 и установите радиус скругления Corner radius на 100 пкс. Ширина границы Border width остается 0 пкс.
В разделе Shadow оставьте включенным Box shadow. Используйте горизонтальное смещение 0 пкс, вертикальное смещение 8 пкс, размытие 24 пкс, растяжение −4 пкс, цвет #460BD8 и непрозрачность 32%. Оставьте Inset shadow и Text shadow выключенными.
Отступы меняют пространство вокруг текста. Радиус скругления меняет контур. Большой радиус создает форму «таблетки», не делая надпись шире.
Настройте состояние наведения отдельно
Переключите состояние редактирования (Editing state) на Hover. В разделе Fill измените цвет фона Background color на #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 выполняются в вашем браузере. Редактор не загружает текст вашей кнопки или черновик стиля для создания экспорта.
Придайте своей следующей кнопке собственный стиль.
Выберите отправную точку, настройте детали и добавьте код в свой проект.