Сделано на Тильда? | Эффект для кнопок

Сегодня у нас на повестке дня - удивительный эффект при наведении на кнопку на Tilda.
В этом видео я покажу вам, как создать захватывающий эффект свечения вокруг кнопки при наведении.

Не требуется никаких специальных навыков программирования или дизайна, чтобы реализовать этот эффект. Вместе со мной вы шаг за шагом узнаете, как это сделать.

Если вам понравилось это видео и вы хотите увидеть больше подобных уроков, не забудьте поставить лайк и подписаться на мой канал)))

Ссылка на телеграм-чат:

Ссылка на сайт с генератором градиентов:

Код будет внизу)
Удачи в модификации своих кнопок!

[konstantinDev]

Сможешь повторить?)

А вот и код:
<style>
.ndt_btn .tn-atom {
transition: all .5s !important; /* скорость анимации изменения фона кнопки (не обводки) */
cursor: pointer;
}
.ndt_btn .tn-atom::after, .ndt_btn .tn-atom::before {
content: '';
position: absolute;
top: -2px; /* позиция обводки */
left: -2px; /* позиция обводки */
width: 102%; /* обводка по ширине */
height: 106%; /* обводка по высоте */
background-size: 100% 100%;
background-position: 0px 0px;
background-image: conic-gradient(from 0deg at 50% 50%, 0%, #009AFFFF 10%, #2000FFFF 23%, #000EFFFF 37%, #9900FFFF 51%, #FF00DDFF 60%, #EEFF00FF 79%, 99%);
z-index: -1;
border-radius: 35px; /* скругление углов обводки и тени */
filter: contrast(60%); /* изменение контрастности обводки и тени*/
opacity: 0;
transition: all .5s !important; /* скорость анимации появления подсветки*/
}
.ndt_btn .tn-atom::before {
top: -15%; /* позиция тени *//**/
left: -15%; /* позиция тени */
width: 130%; /* ширина тени */
height: 130%; /* высота тени */
filter: blur(0px); /* блюр тени когда не навелись */
}
.ndt_btn .tn-atom:hover::before, .ndt_btn .tn-atom:hover::after {
opacity: 1; /* непрозрачность цветной тени */
}
.ndt_btn .tn-atom:hover::before {
filter: blur(25px); /* блюр тени при наведении */
}
.ndt_btn .tn-atom:hover {
background-color: #000 !important; /* цвет фона кнопки при наведении (это фон кнопки, а не подсветка) */
}
</style>

[smehlaba]

ты большой молодец красава делай еще :)

[rudavina_svg]

очень классный канал и полезный канал! спасибо :)

[ovmhkef]

Очень красивл на видео прлучилось. А код этот полностью вставлять нужно на Тильде?