Градиент на кнопке Тильда

🗓️ Обновлено: 10.08.2021
💬Комментариев: 0
👁️Просмотров: 1940
web

В этой статье быстро и на примере покажем, как сделать правильный градиент на кнопке в конструкторе Тильда.

Пошаговая инструкция создания градиента в Тильде:

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

ВАЖНО: в коде нужно поменять название button_gradient на ваше название класса.

Внутри свойства linear-gradient используются следующие значения:

  • 45deg — направление градиента;
  • #F03358 60% — первый цвет градиента и площадь его положение в процентах (в нашем случае, первый цвет располагается на 60% кнопки);
  • #6D107E — второй цвет.

При желании можно добавить и третий, четвертый цвет. Ограничений нет.

Добавляем градиент к кнопке в Тильде
  1. Сохраняем изменения и публикуем страницу. Получаем результат долгожданный результат:
Кнопка с градиентом в Тильде

Пишите в комментариях, все ли у вас получилось

Статья была полезной?
👍
Да - 7
👎
Нет - 1
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18281
Появление элементов при скролле
Просмотров: 16837
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8527
Как выровнять картинку по центру с помощью CSS
Просмотров: 6951
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6789
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab