Как сделать кнопку с градиентом в ZeroBlock в Tilda
+1-2345-2234
sales@goodlayers.co
LEARN MORE ⇛
PROFESSIONAL STUDIO IN
LONDON.
VIEW OUR WORKS
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Founded in 2008 by professional photographer, John Smith. We product visual content full-service creative to post production. Ultimately our mission is to help people to see beauty in themselves.

Как сделать кнопку с градиентом в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него элемент Button/Кнопка и присвоили ей ссылку класс aboutme ( или ссылку #aboutme)
3
Добавили на страницу код в блок ДРУГОЕ►Т123
Цвета можно настроить в этой строке
background-image: linear-gradient(45deg , #FFD115 60%, #ff5959);
45deg - угол направления градиента
Ссылку можно написать свою!!
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём градиент для кнопки и других элементов. Изменяем параметры градиента прямо на сайте.
Длительность видео: 47 минут
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера с классом

<style>
/*Эффект для кнопки*/
.aboutme .tn-atom {
    background-image: linear-gradient(45deg , #FFD115 60%, #ff5959);
    box-shadow: 0 16px 32px 0 rgba(255, 141, 0, 0.35);
    background-position: 100% 0 !important;
    background-size: 200% 200%;
    transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
.aboutme .tn-atom:hover {
   box-shadow: 0 0 0 0 rgba(0,40,120,0);
   background-position: 0 0 !important;
}
</style>
Библиотека для примера со ссылкой

<style>
/*Эффект для кнопки*/
[href='#aboutme'] {
    background-image: linear-gradient(45deg , #FFD115 60%, #ff5959);
    box-shadow: 0 16px 32px 0 rgba(255, 141, 0, 0.35);
    background-position: 100% 0 !important;
    background-size: 200% 200%;
    transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
[href='#aboutme']:hover {
   box-shadow: 0 0 0 0 rgba(0,40,120,0);
   background-position: 0 0 !important;
}
</style>
Made on
Tilda