Фиксированная кнопка мессенджера

В теме рассмотрены 4 примера создания внизу страницы кнопки с ссылкой на нужный контакт. Это телефон, WhatsApp, Telegram и Viber.

Выберите нужный мессенджер для просмотра примера (в правом нижнем углу экрана) и кодов его реализации.

HTML:

CSS:

HTML:

CSS:

HTML:

CSS:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Алексей Валерьевич:

    Спасибо вам огромное за анимированные кнопки с мессенджером для сайта. Всё прекрасно работает и с установкой не было проблем. Удачи!

    Ответить
  • Anton:

    как заменить иконку на иконки инсты я непонял

    Ответить
    • Alexander:

      Заходим сюда
      Ищем нужную иконку и нажимаем на CSS, получаем код для background-image и заменяем
      Цвет иконки меняем на нужный (по умолчанию там черный fill='%23000000')

      Если SVG иконка откуда то еще, можно преобразовать ее тут
      А если она в PNG, то вообще все просто, указывайте путь и все

      Ответить
  • Артем:

    Спасибо, все отлично работает !

    Ответить
  • СЕРГЕЙ:

    Сделайте пожалуйста такие же кнопки вк и инсту

    Ответить
    • Alexander:

      background-image и цвета замените у любой и все 🙂

      Ответить
      • Сергей:

        А путь, иконку. Я делал. Всё равно переход на эти!

        Ответить
        • Alexander:

          И ссылку соответственно 🙂

          Ответить
  • Станислав:

    Я имел ввиду, куда установить код, чтобы там кнопка и появлялась.. Чтобы без регулировки в CSS right: 20px; bottom: 20px;

    Ответить
    • Alexander:

      Убрать фиксированную позицию: position: fixed;

      Ответить
  • Станислав:

    Здравствуйте! К примеру, как в блоки Builder, выставленные в один ряд.. как сделать, чтобы кнопка была в том блоке, в котором находится код? К примеру, вот в трёх блоках Builder находятся иконки https://disk.yandex.ru/i/Hj8h4Ry-xuFNOw
    Как сделать так, чтобы там были эти активные кнопки мессенджеров? Чтобы нормально отображалось и на мобильных устройствах..

    Ответить