URL скопирован в буфер обмена!

Как сделать ссылку в виде кнопки и добавить ее в любой блок на Tilda

Данная модификация поможет преобразовать ссылку в кнопку, что дает возможность добавить пользовательскую кнопку в любой стандартный блок, карточку товара или даже в блок блога на платформе Тильда.

Номер модификации в библиотеке TiCode
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками

Генератор кода

Тип ссылки
Применять стили
Ссылка
Цвет текста
Цвет фона
Цвет текста при наведении
Цвет фона при наведении
Радиус скругления углов
Скорость ховера
Настройки внутренних отступов кнопки
Оступ слева
Оступ справа
Оступ сверху
Отступ снизу
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD000--><style> a[href="#test"] { color: #ffffff !important; background-color: #F96855; display: inline-block; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-radius: 10px; transition: all 0.3s ease; } a[href="#test"]:hover { background-color: #FA897B; color: #ffffff !important; } </style>
КОПИРОВАТЬ КОД
Выбираем в генераторе тип ссылки: "для блока" - если хотите вставить кнопку в стандартный блок или "для карточки товаров" - если нужна кнопка в popup товара.

Инструкция для блока:
1. Указываем в тексте свою ссылку и дублируем ее в генератор кода в поле "Ссылка".

2. Указываем дополнительные настройки в генераторе кода:
Цвет текста - указываем цвет текста кнопки;
Цвет фона - указываем цвет текста кнопки;
Цвет текста при наведении - указываем цвет текста кнопки при наведении;
Цвет фона при наведении - указываем цвет фона кнопки при наведении;
Радиус скругления углов - указываем радиус скругления углов у кнопки;
Скорость ховера - указываем скорость в секундах. Это время за которое будет меняться цвет кнопки при наведении ;
Настройки внутренних отступов кнопки - указываем внутренние отступы текста в кнопке;

3. Копируем готовый код и вставляем в HTML блок Т123;

Инструкция для карточки товаров:
1. В поле "Применять стили только" выбираем к каким ссылкам применим стили. "Ко всем ссылкам в карточке" - если у вас в карточке товара несколько ссылок, они все будут сделаны в виде кнопок. "Только к первой ссылке" - только первая ссылка будет в виде кнопку. Остальные ссылки будут идти текстом.

2. Товары загружаем через каталог тильда и в поле каталога "текст" указываем свою ссылку.

3. Указываем дополнительные настройки в генераторе кода.

4. Копируем код и вставляем его в Настройки сайта -> Еще -> CSS. Сохраняем изменения.
We Are Cute
The smartest people work every day to provide the best service and make our clients happy
  • Max Holden
    Founder & Art Director
    Max founded our company. He is the father of our main goals and values. He found the core members of our team and helped them to show their unique talents in the work process.

    Custom button
  • Lucy Good
    Design Director
    Julia takes care of everything you can see. She spent five years in London learning visual communication. She uses her knowledge to make the world a little more beautiful.

    Custom button
  • Eva Stark
    Customer Support
    Eva is the voice of our brand. She spends hours making our clients feel cared for and enjoying their communication with the company. If you have any suggestions, you can write to her.

    Custom button
Made on
Tilda