Как сделать градиент на кнопке в тильде
В линейном градиенте переход между цветами происходит по прямой линии. Можно использовать несколько цветов, изменить расстояние между ними внутри градиента и задать любой угол направления для цветового сочетания.
Чтобы добавить линейный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Linear. Чтобы добавить ещё один цвет, выберите его на панели. Чтобы удалить цвет, зажмите его и потяните вниз. Под палитрой можно задать угол, под которым будет отображаться градиент — введите число или покрутите виджет мышкой.
Радиальный градиент (Radial)
Переход между цветами в радиальном градиенте происходит из центра наружу по кругу. В настройках блока можно задать любое количество цветов и расстояние между ними внутри градиента.
Чтобы добавить радиальный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Radial.
Добавляйте градиенты в дизайн вашего проекта без использования дополнительных инструментов, прямо внутри редактора Zero Block.
Градиент на кнопке Тильда
В этой статье быстро и на примере покажем, как сделать правильный градиент на кнопке в конструкторе Тильда.
Пошаговая инструкция создания градиента в Тильде:
- Создаем Zero-block:
- Добавляем элемент Кнопка:
- Вызываем свойства кнопки мышкой (обычно, правой кнопкой мыши) и нажимаем Add CSS Class Name:
- Называем как угодно (понятно для вас) класс этой кнопки. ВАЖНО: нельзя использовать специальные символы и пробелы, а также кириллицу. Можно только латинские буквы, тире и нижнее подчеркивание. В нашем примере я назвал класс: button_gradient
- Сохраняем и закрываем редактор Zero-block. Теперь добавляем новый блок на страницу. Заходим во Все блоки, ищем вкладку Другое и находим блок HTML-код
- Нажмите на кнопку Контент нового блока HTML-кода. В поле необходимо вставить следующий код:
.button_gradient .tn-atom ВАЖНО: в коде нужно поменять название button_gradient на ваше название класса.
Внутри свойства linear-gradient используются следующие значения:
- 45deg — направление градиента;
- #F03358 60% — первый цвет градиента и площадь его положение в процентах (в нашем случае, первый цвет располагается на 60% кнопки);
- #6D107E — второй цвет.
При желании можно добавить и третий, четвертый цвет. Ограничений нет.
- Сохраняем изменения и публикуем страницу. Получаем результат долгожданный результат:
Пишите в комментариях, все ли у вас получилось
Как сделать градиент на кнопке в тильде
Лицо, которое вы видите чаще, чем своего кота, актер в @go.freelance
Копирайтер, гений творческой мысли и чудный мастер капкейков в @go.freelance
Maria Achne
Креативный дизайнер, motion дизайнер и визуализатор в @go.freelance
Max Andreev
Продуктовый дизайнер, бренд-менеджер и креативный директор @go.freelance
Alina Semenova
Градиентная обводка элементов в Тильда
Градиентная обводка для шейпа и каринки в Zero блоке
1. Добавляем элементу класс .gborder
2. Добавляем HTML-код — T123 и вставляем в него код
3. Подбираем значение bored-radius в зависимости от скругления шейпа
.gborder .tn-atom < position: relative; >.gborder .tn-atom::before
Градиентная обводка для кнопки в Zero блоке
1. Добавляем элементу класс .gbtn
2. Добавляем HTML-код — T123 и вставляем в него код
3. Подбираем значение bored-radius в зависимости от скругления кнопки
.gbtn .tn-atom < position: relative; >.gbtn .tn-atom::before
Делаем простой линейный градиент тени у кнопки в Tilda
Данный код помогает добавить градиентную тень на вашу кнопку в zero-блок. Также возможно изменить направление градиента, цвет и его расположение
Делаем простой линейный градиент тени
Заказать код
Вступить в чат
Предложить код
Видео временно недоступно
Мы записываем видео-урок к модификации прямо сейчас. Наберитесь терпения и скоро мы подробно все объясним
Инструкция
Добавьте кнопку и присвойте class «sample»
Скопируйте и вставьте код ниже в блок «ST123»
Поменяйте цвета градиента на любые другие
Код скопирован
.sample < inline-size: 50vmin; block-size: 35vmin; background: linear-gradient( to bottom right, #FFD945, #32BA7C ); border-radius:30px; position: relative; >.sample::before
Другие модификации
@ 2019-2023 YOUX AGENCY. Разработка современных сайтов на Tilda
Социальные сети
Мы команда открытых, вежливых и порядочных веб-дизайнеров. Расскажите о своих планах, мечтах, проблемах и найдите решение вместе с нами