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

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

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

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

Подивитися приклад ви можете внизу даної сторінки там же ви можете і завантажити вже готові бічні кнопки і просто встановити їх на свій сайт методом копіювання потрібних ділянок коду, отже давайте вже приступимо.

Як я вже писав спочатку, ми будемо робити стильні бічні кнопки без використання JS скриптів, а також без застосування будь-яких картинок, але так як нам потрібно зробити кнопки більш презентабельні то замість картинок для іконок ми будемо застосовувати іконочні шрифти Font Awesome, тому перевірте чи не підключений вже у вас цей шрифт на сайті, якщо не підключений то використовуйте інформацію з нашої колишньої публікації де детально описано як підключити на свій сайт шрифт Font Awesome.

І так, припустимо що шрифт Font Awesome у вас вже підключений, це добре, що ж далі, а далі ми додаємо на свій сайт наприклад відразу після тега <body> наступну HTML розмітку:

Як ви вже бачите тут немає нічого складного, кілька блоків div, кілька стилів, і самі посилання на потрібні нам сторінки.

Добре HTML розмітка з кнопками додана, наступним нашим завданням буде зробити гарне відображення наших бічних кнопочок, і для цього в основний ваш файл стилів додайте наступний код:

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

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.