Создаём стиль CSS для боковой кнопки сайта

Наверно, Вы не раз замечали на веб сайтах размещение графических панелей, которые обычно располагаются на боковой границе экрана, и выглядят как простенькие кнопки. Зачастую, на такую кнопку подвязывается ссылка на обратную связь или другую полезную ерунду. А вот как сделать такую «фишку» разберёмся ниже…

button-forsite

Боковая кнопка для сайта

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

  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. Конструкция кода кнопки будет выглядеть следующим образом:
    <divid=”left-button”>
    код кнопки (HTMLкод изображения или текста)
    </div>Тем самым применяем созданный стиль к ранее созданному коду изображения кнопки;

Анимация по наведению курсора мышки

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

  1. Следуя прошлым инструкциям, перейдите к созданию нового стиля. Имя указывается неизменным, но с добавлением параметра:
    #left-button:hover {В конце через двоеточие, указывается параметр «по наведению курсора»;
  2. Следовательно, во втором стиле содержимое параметров корректируется в соответствии с условиями анимации кнопки (стоит поэкспериментировать, чтобы добиться требуемого эффекта):
  3. В первом и втором стиле будет полезно воспользоваться внешним и внутренним отступом, которые настроят позиционирование и смогут реализовать движение.

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

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

<divstyle=»position: fixed; z-index: 9999; width: 30px; height: 200px; overflow: hidden; left: 0px; top: 220px;»>
Код кнопки (HTML код картинки или текста)
</div>

Вместо послесловия

Собственно, вышеописанные параметры стилей, являются довольно общими, но расширить их не представляет труда. Некоторые параметры Вы могли видеть ранее, а кое что только предстоит опробовать. Главное, не нагружайте код всяческими CSS — значениями!

Если у Вас есть вопросы или предложения по реализации «боковой кнопки», напишите об этом в форме комментариев.

обновлено: 25.06.2016 - 12:47

  поделитесь с друзьями:
Подписаться на почтовую рассылку*

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

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить", я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности

Сообщите об ошибке, мы исправим:

Отправить