Добавление иконки в кнопку | Tilda & Zero Block

Простой способ добавить свою иконку в кнопку на Тильде в Zero Block. В этом руководстве вы узнаете, как легко и быстро кастомизировать кнопки, используя CSS и JS, чтобы сделать ваш сайт более привлекательным и уникальным. Подходит даже для новичков.

<style>
/*
  Добавление своей иконки в кнопку в Zero Block.
  Больше модификаций в Skinweb.ru
*/
  .btn-icon {
    background-color: #2962FF; /* Фон кнопки */
    border-radius: 30px; /* Скругление кнопки */
    padding: 10px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
</style>

<script>
  // Анимация иконки при наведении
  const enableHover = true; // true - включить анимацию, false - выключить

  function addIconToElement(elementClass, iconUrl) {
    document.querySelectorAll(`.${elementClass}`).forEach(element => {
      const icon = new Image();
      icon.src = iconUrl;
      icon.style.width = icon.style.height = '20px';
      icon.style.transition = 'transform 0.3s ease';
      element.prepend(icon);

      if (enableHover) {
        element.onmouseenter = () => icon.style.transform = 'translateX(5px)';
        element.onmouseleave = () => icon.style.transform = 'translateX(0)';
      }
    });
  }

  // Тут вставьте ссылку на иконку
  addIconToElement('btn-icon', 'https://i.postimg.cc/nh7Hzzvb/icons8-60-1.png');
</script>
Made on
Tilda