Свои иконки в кнопках 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>
Скопировать код
Скопировать код
Код скопирован!

Особенности

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

Документация

Параметры

Стили

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Понравились модификации?
Можете отправить любую сумму, чтобы поблагодарить автора за работу. Вам плюсик в карму, а мне приятно!
 
Поделитесь впечатлениями
Нравятся модификации?
Расскажите про опыт ваш работы с модификациями — обратная связь поможет сделать их лучше
Расскажите про ваш опыт работы с ними — обратная связь поможет сделать их лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис