Простые боковые кнопки на сайт
Красивые боковые кнопки для сайта
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

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

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

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

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

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

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

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

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

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

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

Нет комментариев

Вы можете оставить комментарий первым.

Оставить комментарий

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