Простые боковые кнопки на сайт
Красивые боковые кнопки для сайта
💼 Создание современных веб сайтов любой сложности. | 👌 WEB-UKRAINE.COM

Простые боковые кнопки на сайт

5/52 оценки

Приветствую тебя уважаемый посетитель нашего сайта. В сегодняшней короткой статье мы поговорим о том как добавить на свой сайт стильные боковые кнопки.

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

Для решения данной задачи нам потребуется самое малое, это несколько строчек HTML и несколько строчек кода CSS. В данном примере мы не будем использовать какие то сложные JS скрипты а создадим боковые кнопки на чистом CSS.

Посмотреть пример вы можете внизу данной страницы там же вы можете и скачать уже готовые боковые кнопки и просто установить их на свой сайт методом копирования нужных участков кода, и так давайте уже приступим.

Как я уже писал изначально мы будем делать стильные боковые кнопки без использования JS скриптов, а так же без применения каких либо картинок, но так как нам нужно сделать кнопки более презентабельные то вместо картинок для иконок мы будем применять иконочный шрифт Font Awesome, поэтому проверьте не подключен ли уже у вас данный шрифт на сайте, если не подключен то используйте информацию с нашей прежней публикации где детально описано как подключить на свой сайт шрифт Font Awesome.

И так допустим что шрифт Font Awesome у вас уже подключен, это хорошо, что же дальше, а далее мы добавляем на свой сайт к примеру сразу после тега <body> следующую HTML разметку:

Как вы уже видите в ней нет ничего сложного, несколько блоков div, несколько стилей, и сами ссылки на нужные нам страницы.

Хорошо HTML разметка с кнопками добавлена,  следующей нашей задачей будет сделать красивое отображение наших боковых кнопочек, и для этого в основной ваш файл стилей добавьте следующий код:

Ну вот в принципе и все, теперь у вас на сайте слева сбоку будут красоваться красивые боковые кнопочки, внешний вид которых вы можете подкорректировать используя добавленный код CSS стилей. пользуйтесь на здоровье.

ДЕМО ПРИМЕР

Так же вы можете скачать готовые исходники ниже.

СКАЧАТЬ БОКОВЫЕ КНОПКИ

Вас также может заинтересовать

4 комментария

  •   09.06.2019 в 13:07

    К сожалению, эти кнопки видны только на компьютере, на экране смартфона они исчезают. Если бы они работали и на мобильных устройствах, то было бы очень круто.

    Ответить
    • Створення фотогалереї на jQuery
        09.06.2019 в 16:02

      Ну, а что мешает подшаманить с CSS стилями и отображать в мобильных или любых других устройствах данные кнопки…

      Ответить
  •   31.03.2020 в 11:05

    Помогите эти кнопки добавить и на мобильные

    Ответить

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

Виберіть спосіб спілкування
Звязатися з нами!
Ми готові до діалогу.