Как и куда добавить CSS в Тильде: делаем свой эффект тени для стандартной кнопки
Как сделать кнопку в HTML?
Добрый день. Сегодня рассмотрим как просто сделать красивую кнопку на HTML и добавить к ней стили. Итак, приступим... Для начала, как всегда, создаем файл test.html в любом месте нашего ПК. Открываем наш файл test.html и вставляем строку подключения нашего файла со стилями: <head>
<link rel="stylesheet" href="styles.css">
</head> Далее мы прописываем нашу кнопку: <body>
<button class="custom-btn btn-2">Кнопка</button>
</body> Но без стилей наша кнопка выглядит очень скучно, исправим это. Открываем наш файл styles...
Как добавить свою тень, любому объекту на платформе Тильда. На примере рассмотрим кнопку. В Тильде можно добавить только одну тень, но что делать, если по дизайну три разных вида тени. 1.Правой кнопкой мыши нажимаем на кнопку, выбираем исследовать элемент. Нам надо найти такие значения кнопки: #rec514551868 .tn-elem[data-elem-id="1669218909812"].tn-atom 2.Копируем это значение и идем в Тильду-Настройка сайта –Еще-Редактировать CSS. 3.Вставляем скопированное значение и раскрываем скобки – {box-shadow: 4.Прописываем дальше значение в соответствие с тем что вам надо по этой схеме: box-shadow: inset (внутренняя тень) 4px (сдвиг тени по горизонтали) 4px (сдвиг тени по вертикале) 20px (размытие тени блюр) 3px (растяжение тени spread) rgba(183,103,9.1) (цвет который вам нужен, в фигме можно посмотреть значения) 5.В конце кода прописываем !important. 6.Если вам надо несколько теней прописываем их через запятую. Пример: #rec514551868 .tn-elem[data-elem-id="1669218909812"].tn-atom{box-shadow: 0px 0px 25px 0 rgba(255, 168, 0, 0.7), 0px 5px 0px 0 rgba(183,103,9.1),inset 0px -2px 2px 0 rgba(210,114,0,0.3) !important } 7.Сохраняем и публикуем страницу.