Градиент на кнопке Тильда
🗓️ Обновлено: 10.08.2021
💬Комментариев:
0
👁️Просмотров: 3505
В этой статье быстро и на примере покажем, как сделать правильный градиент на кнопке в конструкторе Тильда.
Пошаговая инструкция создания градиента в Тильде:
- Создаем Zero-block:
- Добавляем элемент Кнопка:
- Вызываем свойства кнопки мышкой (обычно, правой кнопкой мыши) и нажимаем Add CSS Class Name:
- Называем как угодно (понятно для вас) класс этой кнопки. ВАЖНО: нельзя использовать специальные символы и пробелы, а также кириллицу. Можно только латинские буквы, тире и нижнее подчеркивание. В нашем примере я назвал класс: button_gradient
- Сохраняем и закрываем редактор Zero-block. Теперь добавляем новый блок на страницу. Заходим во Все блоки, ищем вкладку Другое и находим блок HTML-код
- Нажмите на кнопку Контент нового блока HTML-кода. В поле необходимо вставить следующий код:
<style>
.button_gradient .tn-atom {
background-image: linear-gradient(45deg , #F03358 60%, #6D107E);
}
</style>ВАЖНО: в коде нужно поменять название button_gradient на ваше название класса.
Внутри свойства linear-gradient используются следующие значения:
- 45deg — направление градиента;
- #F03358 60% — первый цвет градиента и площадь его положение в процентах (в нашем случае, первый цвет располагается на 60% кнопки);
- #6D107E — второй цвет.
При желании можно добавить и третий, четвертый цвет. Ограничений нет.
- Сохраняем изменения и публикуем страницу. Получаем результат долгожданный результат:
Пишите в комментариях, все ли у вас получилось
