Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать кнопку с градиентом в ZeroBlock в Tilda
+1-2345-2234
sales@goodlayers.co
LEARN MORE ⇛
PROFESSIONAL STUDIO IN
LONDON.
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.
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.

Как сделать кнопку с градиентом в 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