Бічна кнопка для сайту

Бічна кнопка для сайту

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

  1. Відкрийте на редагування файл style-css (Таблиця стилів). Прокрутіть в кінець його вмісту. Почніть створення з нового рядка;
  2. По-перше, задамо ім'я стилю:
    # Left-button Знак «решітка», є обов'язковим елементом початку імені стилю, а ліва фігурна дужка ставиться через пробіл, відкриваючись для параметрів CSS;
  3. З нового рядка введемо цілий ряд параметрів нового стилю:
    position: fixed;
    z-index: 9999;
    width: 30px;
    height: 200px;
    overflow: hidden;
    left: 0px;
    top: 200px; Перший параметр «position» задасть позицію на екрані - fixed, фіксовані координати відображення (самі координати задаються значеннями в left, top, z-index). Параметрами Width- height задайте ширину і висоту відповідно, значення вкажіть в пікселях, рівне вирішенню картинки кнопки;
  4. Отредактіруте вищевказані параметри відповідно до ваших умовами. Після закрийте правою фігурною дужкою «>».
  5. Збережіть зміни у файлі CSS. І перейдіть до вбудовування коду кнопки, кращим варіантом буде вставка перед закривається тегом «HEAD»;
  6. Конструкція коду кнопки буде виглядати наступним чином:

    код кнопки (HTMLкод зображення або тексту)
Тим самим застосовуємо створений стиль до раніше створеного коду зображення кнопки;

Анімація з наведення курсору мишки

Щоб по наведенню курсора наша кнопка змінювала відображення, наприклад, висувалася вперед, слід створити додатковий стиль:

  1. Дотримуючись минулим інструкціям, перейдіть до створення нового стилю. Ім'я вказується незмінним, але з додаванням параметра:
    # Left-button: hover
  2. Отже, у другому стилі вміст параметрів коригується відповідно до умов анімації кнопки (варто поекспериментувати, щоб добитися необхідного ефекту):
  3. У першому і другому стилі буде корисно скористатися зовнішнім і внутрішнім відступом. які налаштують позиціонування і зможуть реалізувати рух.

Статичний варіант відображення кнопки

Для того щоб просто вивести графічну кнопку, необов'язково створювати нові стилі. Досить, застосувати його при вставці коду кнопки перед закриває тегом «HEAD»:


Код кнопки (HTML код картинки або тексту)

Власне, вищеописані параметри стилів, є досить загальними, але розширити їх не становить труднощів. Деякі параметри Ви могли бачити раніше, а дещо тільки належить випробувати. Головне, не навантажуйте код всілякими CSS - значеннями!

Схожі статті