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