Настройка дизайна кнопок
8 мин. чтения
Добавьте на сайт красивые кнопки, которые помогут посетителям перемещаться по разделам и страницам сайта.
Нажмите значок Дизайн 
на кнопке, чтобы настроить ее.
на кнопке, чтобы настроить ее.
Настройка разных состояний кнопки
Вы можете отдельно настроить состояния каждой кнопки на сайте. Это позволяет создавать потрясающие эффекты, которые видят посетители при навигации по сайту.
Например, вы можете выбрать один цвет для одного состояния и другой — для режима наведения или нажатия. Таким образом кнопка будет выделяться, и посетители поймут, что они могут взаимодействовать с ней.
Как это сделать?
Важно:
Эффекты при наведении (нажатии) на кнопки-значки в настоящее время не поддерживаются на iOS. Это означает, что люди, которые заходят на ваш сайт с устройства iOS, не увидят эффект кнопки при наведении, если нажмут на нее.
Дизайн кнопки
Доступно множество параметров дизайна. В зависимости от типа кнопки вы можете настроить фон, текст и значок. Выберите цвета, заливки, углы, тени и многое другое.
Выберите, что вы хотите сделать:
Настройка кнопки с текстом и значком
: настройте заливку фона кнопки. 
: настройте дизайн текста кнопки. 
: измените ширину и дизайн границ. 
: позволяет регулировать радиус углов кнопки. 
: позволяет добавлять и настраивать эффект тени на кнопке. 
: позволяет выбирать, что должно отображаться на кнопке, задавать тип выравнивания и настраивать некоторые другие параметры. 
: позволяет менять внешний вид значка на кнопке. 
Настройка кнопки-значка
Настройка кнопки с изображением
Подробнее о настройке кнопок других типов:
Словарь терминов по дизайну кнопки
Параметры настройки дизайна
Опция | Пояснение | Как использовать |
|---|---|---|
Заливка | Добавьте различные заливки, такие как цвета, изображения, узоры и градиенты, чтобы создать потрясающие и красочные эффекты для кнопки. |
|
Границы | Настройте границу кнопки, чтобы она выделялась. Настройте все стороны кнопки вместе или каждую сторону отдельно, нажав значок замка. |
|
Уголки | Измените закругление углов кнопки, чтобы сделать ее более округлой или квадратной. Настройте все углы кнопки вместе или каждый отдельно, нажав на значок замка. | Щелкните в поле с цифрой в углу и введите значение в пикселях, которое вы хотите применить к нему. |
Тени | Добавьте тень к кнопке, а затем настройте ее цвет и размер. |
При использовании кнопки загрузки:
|
Макет | Меняет макет кнопки. |
|
Параметры форматирования текста
Опция | Пояснение | Как использовать |
|---|---|---|
Показать текст | Включает или выключает отображение текста на кнопке. | Нажмите переключатель, чтобы показать или скрыть текст кнопки. |
Стиль | Выберите стиль текста кнопки. | Выберите стиль текста из раскрывающегося меню. |
Шрифты | Подберите шрифт текста кнопки. | Нажмите раскрывающееся меню и выберите шрифт |
Размер шрифта | Меняет размер текста кнопки. | Перетащите ползунок, чтобы увеличить или уменьшить размер шрифта, или введите значение. |
Форматирование текста | Выберите форматирование текста. |
|
Межбуквенный интервал | Измените интервал между текстовыми символами. | Перетащите ползунок, чтобы увеличить или уменьшить расстояние между символами, или введите значение. |
Тени | Добавляет тень к тексту. Вы можете добавить к тексту несколько теней. | Нажмите Добавить тень, чтобы добавить новую. Щелкните значок Настроить тень, чтобы настроить ее параметры. |
Параметры значка
Опция | Пояснение | Как использовать |
|---|---|---|
Показать значок | Включает или выключает отображение значка на кнопке. | Нажмите переключатель, чтобы показать или скрыть значок на кнопке. |
Размер | Меняет размер значка. | Перетащите ползунок, чтобы увеличить или уменьшить размер значка, или введите значение. |
Цвет | Меняет цвет значка. | Нажмите на поле цвета и выберите нужный оттенок. |
Поворот | Задайте угол поворота значка. | Перемещайте ручку поворота и меняйте положение значка. Также вы можете ввести числовое значение в градусах в текстовое поле. |
Была ли статья полезна?
|