Создаём стиль CSS для боковой кнопки сайта
Наверно, Вы не раз замечали на веб сайтах размещение графических панелей, которые обычно располагаются на боковой границе экрана, и выглядят как простенькие кнопки. Зачастую, на такую кнопку подвязывается ссылка на обратную связь или другую полезную ерунду. А вот как сделать такую «фишку» разберёмся ниже…
Содержание статьи:
Боковая кнопка для сайта
Небольшое предисловие. Для того чтобы сделать боковую кнопку потребуется лишь задать верный стиль, который бы взял на себя все свойства отображения. Ну, а теперь о самом создании стиля:
- Откройте на редактирование файл style-css (Таблица стилей). Переместитесь в конец его содержимого. Начните создание с новой строки;
- Во первых, зададим имя стилю:
#left-button {
Знак «решётка», является обязательным элементом начала имени стиля, а левая фигурная скобка ставится через пробел, открываясь для параметров CSS; - С новой строки введём целый ряд параметров нового стиля:
position: fixed;
z-index: 9999;
width: 30px;
height: 200px;
overflow: hidden;
left: 0px;
top: 200px;Первый параметр «position» задаст позицию на экране – fixed, фиксированные координаты отображения (сами координаты задаются значениями в left, top, z-index). Параметрами Width– height задайте ширину и высоту соответственно, значения укажите в пикселях, равное разрешению картинки кнопки; - Отредактируте вышеуказанные параметры в соответствии с вашими условиями. После закройте стиль правой фигурной скобкой « } ».
- Сохраните изменения в файле CSS. И перейдите к встраиванию кода кнопки, лучшим вариантом будет вставка перед закрывающимся тегом «HEAD»;
- Конструкция кода кнопки будет выглядеть следующим образом:
<divid=”left-button”>
код кнопки (HTMLкод изображения или текста)
</div>Тем самым применяем созданный стиль к ранее созданному коду изображения кнопки;
Анимация по наведению курсора мышки
Чтобы по наведению курсора наша кнопка меняла отображение, например, выдвигалась вперёд, следует создать дополнительный стиль:
- Следуя прошлым инструкциям, перейдите к созданию нового стиля. Имя указывается неизменным, но с добавлением параметра:
#left-button:hover {В конце через двоеточие, указывается параметр «по наведению курсора»; - Следовательно, во втором стиле содержимое параметров корректируется в соответствии с условиями анимации кнопки (стоит поэкспериментировать, чтобы добиться требуемого эффекта):
- В первом и втором стиле будет полезно воспользоваться внешним и внутренним отступом, которые настроят позиционирование и смогут реализовать движение.
Статический вариант отображения кнопки
Для того чтобы просто вывести графическую кнопку, необязательно создавать новые стили. Достаточно, применить его при вставке кода кнопки перед закрывающим тегом «HEAD»:
<divstyle=»position: fixed; z-index: 9999; width: 30px; height: 200px; overflow: hidden; left: 0px; top: 220px;»>
Код кнопки (HTML код картинки или текста)
</div>
Вместо послесловия
Собственно, вышеописанные параметры стилей, являются довольно общими, но расширить их не представляет труда. Некоторые параметры Вы могли видеть ранее, а кое что только предстоит опробовать. Главное, не нагружайте код всяческими CSS — значениями!
Если у Вас есть вопросы или предложения по реализации «боковой кнопки», напишите об этом в форме комментариев.