Свои иконки в кнопках Zero-блока

Позволяет добавлять кастомные иконки для кнопок в Zero-блоке, настраивать их стили при наведении и регулировать положение изображения относительно текста

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Добавьте на страницу кнопки, для которых нужно добавить иконку и задайте им определённый класс

Он может быть любым и нужен для выделения кнопок с иконками среди остальных элементов на странице.
Задайте в настройках модификации класс кнопок, ссылку на иконку и её стили
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>buttons.init('#right', { icon: 'https://static.postnikovmd.com/img/arrow-b.svg', style: { hover: { icon: 'https://static.postnikovmd.com/img/arrow-w.svg', backgroundColor: '#18181B', color: '#FFFFFF' } } })</script>
<script>buttons.init('#left', { icon: 'https://static.postnikovmd.com/img/arrow-b.svg', align: 'left', reverse: true, style: { hover: { icon: 'https://static.postnikovmd.com/img/arrow-w.svg', backgroundColor: '#18181B', color: '#FFFFFF' } } })</script>
<script>buttons.init('#stretch', { icon: 'https://static.postnikovmd.com/img/arrow-c.svg', align: 'stretch' })</script>
<script>buttons.init('#uptitle', { icon: 'https://static.postnikovmd.com/img/icon-lightning.svg', align: 'left' })</script>

Открыть пример

Настройки модификации

Положение:

Настройки модификации

Класс для кнопок:

Ссылка на изображение:

+ Настройки ховера

Кнопки (ховер)

Цвет фона

Цвет текста

Цвет бордера

Ссылка на изображение

Скорость и тип переходов:

Вы можете задать свою иконку и стили для кнопок при наведении.

<!--buttons.js Свои иконки в кнопках. https://postnikovmd.com/mods/buttons-->
<script>buttons.init(".uc-button")</script>

Скопировать код

Особенности

Имеет адаптивный размер

Иконка динамически подстраивается под размер текста в кнопке
Можно переключать по ховеру

Позволяет задавать другую иконку при наведении на элемент
Работает для всех ссылок

Иконка появляется у всех кнопок с определенной ссылкой