Вы здесь:   Главная » Вебмастеру    »    Создаём стиль CSS для боковой кнопки сайта

Создаём стиль 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>

P.S.

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

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

Расскажи друзьям:

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

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

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

Ознакомиться с пользовательским соглашением

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: