Плаваюча кнопка на сайті збоку, mnogoblog
Привіт, сьогодні поговоримо про те як створити плаваючі кнопки на своєму сайті, які додадуть вашому сайту оригінальності.
Завантажити вихідні для статті можна нижче
Для прикладу візьмемо стандартну wordpress тему - Twenty Eleven.
Ось так буде виглядати створювана нами кнопка:
Демо-приклад можна подивитися тут:
Після в самий низ файлу style.css вставимо наступний код:
де:
width: 30px; - ширина кнопки.
height: 150px; - висота кнопки.
left: 0; - відступ зліва, якщо ви поміняєте дану рядок на right: 0; - то кнопка буде розташовуватися праворуч, також можна вказати відступ в пікселях, наприклад: left: 20px;
top: 200px; - верхній відступ.
z-index: 99999; - задає розташування елемента поверх всіх інших, наприклад у картинки шапки в темі Twenty Eleven даний параметр має значення 9999 і якщо ваша кнопка буде мати значення нижче даного параметра, то вона буде розташовуватися під нею.
Також можна додати рядок:
background: # 2B96C6; - вона задає фон кнопки, можна задати як колір, так і картинку.
У ньому відразу після тега body вставляємо висновок нашої кнопки:
Як бачите це код звичайного посилання, тільки для неї заданий особливий клас -
class = "add_comment», стиль оформлення якого ми прописали в пункті 1 цієї статті.
3. Щоб надати дизайн кнопці, потрібно створити для неї зображення.
У мене вийшло таке зображення:
Можете скачати її і спробувати вставити її до себе на сайт або на тестовий сайт на якому-небудь безкоштовному хостингу (я так користуюся hostinger.ru).
Тепер давайте прив'яжемо дане зображення до кнопки, для цього змінимо код виведення кнопки, який я пропонував у пункті 2 цієї статті, на наступний:
Ось і готова наша кнопочка, залишилося тільки додати посилання на потрібну нам сторінку, наприклад так: