Как сделать кнопку в CSS? Подробное руководство

Чтобы сделать появляющуюся кнопку «Наверх» с помощью CSS, воспользуемся свойством z-index — спрячем кнопку за неподвижной областью, размером немного большим самой кнопки, фон которой будет таким же, как и фон сайта.

  1. Создаём контейнер с кнопкой:
     
  2. Пишем для него стили:
    .button { display: block; background: url(путь+к+изображению) center no-repeat; height: 32px; width: 32px; position: fixed; bottom: 10px; right: 10px; z-index: 1; }
display: block;
определяем, что отображать данную ссылку нужно как блок.
background: url(‘путь+к+изображению‘) center no-repeat;
делаем кнопку фоном блока, указывая браузеру, что его нужно поместить в центре и не повторять.
height: 32px; width: 32px;
высота и ширина блока соответственно (их берём исходя из размеров изображения кнопки).
position: fixed; bottom: 10px; right: 10px;
фиксируем блок и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 1;
помещаем блок на 1-ый уровень.

Контейнер-крышка «cap»

Контейнер-крышка будет закрывать кнопку, если страница помещается в окно браузера и скроллинга нет.

  1. HTML:
     
  2. CSS:
    .cap { background-color: цвет+фона+сайта; height: 32px; width: 32px; position: absolute; bottom: 10px; right: 10px; z-index: 2; }
background-color: цвет+фона+сайта;
устанавливаем фон блока таким же, как и фон сайта.
height: 32px; width: 32px;
высота и ширина блока соответственно (их берём также исходя из размеров изображения кнопки или чуть больше).
position: absolute; bottom: 10px; right: 10px;
делаем блок не фиксированным как предыдущий, а абсолютно позиционированным и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 2;
помещаем блок на 2-ой уровень, то есть выше блока с кнопкой.

Пример

25.04.2014image Категория: Разработка сайтов

Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на jquery и чистом javascript. Найдём причины, по которым она может не работать.

Порядок действий:

  1. подключить jQuery;
  2. загрузить на сайт изображение кнопки;
  3. добавить код, скрипт и стили.

Подключаем jQuery — прописываем загрузку последней версии библиотеки в секции «head» шаблона или где-то вверхней части сайта.

Выбираем подходящее изображение и загружаем его в каталог сайта. Представлю на выбор несколько вариантов. Скачать можно кликнув правой клавишей мышки по рисунку и нажав «Сохранить картинку как».

image

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

Скорость прокрутки можно регулировать в этой строке, изменяя число «300»:

Как сделать кнопку без jQuery

Можно сделать плавающую кнопку «наверх» на чистом JavaScript без использования сторонних библиотек. Стили берём из предыдущего примера. Скрипт и код копируем в любое место шаблона.

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

Что делать, если кнопка «наверх» не работает

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;» и проверьте, появится ли она. Нет? Значит проблема в неправильном пути к изображению или код размещён в неподходящем месте. Попробуйте разместить его перед закрывающимся тегом «body».

Если кнопка при изменении свойства отображается, значит дело в скриптах. Следует проверить корректность подключения библиотеки jQuery и отсутствия конфликтов с другими скриптами. Всё в порядке? Тогда оберните скрипт в следующую конструкцию.

Это позволит выполнить скрипт после загрузки всей страницы. Не помогло? Пиши в комментариях и постараемся найти проблему вместе.

Привет, друзья. В прошлой статье обещал рассказать о том, как сделать пульсирующую кнопку в углу экрана, аналогичную тем, которые вы могли видеть у разных виджетов обратного звонка. Меня несколько раз просили рассказать как это сделать и уже на 3 сайта в этом году поставил подобную кнопку. Чтобы не писать раз за разом код заново, решил оформить все в виде статьи и просто копировать исходник отсюда. Если вы искали статью о том, как реализовать пульсирующую кнопку, то вы попали по адресу.

Вот, что мы хотим получить в итоге.

Итак, давайте начнем с разметки.

HTML разметка пульсирующей кнопки

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

Как видите, действительно ничего сложного. Обычная кнопка с несколькими тегами «span» внутри. Первый отвечает за иконку, второй за вывод текста, а остальные, с классом «rings», за круги, которые и имитируют пульсацию.

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

CSS стили кнопки

 .pulse-button {   display: flex;   flex-wrap: wrap;   align-items: center;   justify-content: center;   width: 80px;   height: 80px;   border-radius: 40px;   padding: 10px;   border: none;   background: #ff0000;   box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);   position: fixed;   bottom: 50px;   right: 50px;   cursor: pointer;   outline: none;   z-index: 1000; } 

Туи все стандартно. При помощи flexbox выровнял все по центру. Задал размеры, форму, цвет, позиционирования и положение.

Новичкам:

Управлять положением кнопки можно при помощи атрибутов «left», «right», «top», «bottom». У меня кнопка располагается справа внизу на расстоянии 50 пикселей. Я использую «bottom: 50px;» и «right: 50px;». Если вам нужно справа вверху, то удалите мои атрибуты и впишите, например, «top: 100px;» и «left: 100px».

Кроме, возможна ситуация, когда кнопку при скролле будут перекрывать другие элементы сайта. Для этого нужно узнать у этого элемента значение z-index и сделать у кнопки его выше. Аналогично и модальным окном. Может случиться так, что оно не будет перекрывать кнопку. В таком случае нужно сделать у модального окна значения атрибута z-index повыше.

Подробнее про z-index можно почитать на MDN.

Теперь давайте стилизуем «span» с иконкой и текстом, а также добьёмся того, чтобы при наведении они меняли друг друга.

Начнем с иконки, так как у нас она видна по умолчанию.

 .pulse-button__icon {   display: block;   width: 30px;   height: 30px;   background: url("../img/phone.svg") center center/cover no-repeat;   transition: .3s; } 

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

Теперь займемся блоком с текстом.

 .pulse-button__text {   display: block;   width: 100%;   height: 30px;   font: 12px 'Open Sans', sans-serif;   color: #fff;   text-align: center;   line-height: 1.2;   opacity: 0;   visibility: hidden;   position: absolute;   transition: .3s;   margin-top: 1px; } 

Тут тоже без сюрпризов. Временно можете закомментировать блок с иконкой, а у текста инвертировать «opacity» и «hidden», чтобы отцентрировать текст в случае, если используете другой шрифт. Сейчас этот блок невидно, так как логика в том, чтобы показать его только при наведении на кнопку. Давайте сделаем это.

 .pulse-button:hover .pulse-button__icon {   opacity: 0;   visibility: hidden;   position: absolute;   transition: .3s; }  .pulse-button:hover .pulse-button__text {   transition: .3s;   opacity: 1;   visibility: visible;   position: relative; } 

При наведении на кнопку при помощи «opacity», «visibility» и «position» скрываем область с иконкой и показываем «span» с текстом. «Transition» отвечает за плавность.

Как сделать пульсации на CSS

Теперь займемся стилизацией окружностей, которые отвечают за имитацию пульсации. Как вы помните — у нас их 3.

 .pulse-button__rings {   border: 1px solid #ff0000;   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0;   height: auto;   width: auto;   border-radius: 50%;   animation-duration: 2.0s;   animation-name: pulse_1;   animation-iteration-count: infinite;   z-index: -1; }  .pulse-button__rings:nth-child(2) {   animation-name: pulse_2; }  .pulse-button__rings:nth-child(3) {   animation-name: pulse_3; } 

Тут самое интересное это анимация. Говорю, что длиться она будет 2 секунды, бесконечно раз. В «annimation-name» передаю название анимации, вид которой описан ниже. «Border» — отвечает за толщину окружности.

 @keyframes pulse_1 {   from {     opacity: 1;     transform: scale(0.9, 0.9);   }    to {     opacity: 0;     transform: scale(1.3, 1.3);   } }  @keyframes pulse_2 {   from {     opacity: 1;     transform: scale(0.8, 0.8);   }    to {     opacity: 0;     transform: scale(1.5, 1.5);   } }  @keyframes pulse_3 {   from {     opacity: 1;     transform: scale(0.8, 0.8);   }    to {     opacity: 0;     transform: scale(1.7, 1.7);   } } 

Как видите, анимация достаточно примитивная. Меняется только прозрачность и масштаб, но это и позволяет добиться нужно эффекта.

О том как сделать вызов модального окна при клике на любую кнопку подробно описано в статье: «Как сделать модальное окно на сайте». Там разбираемся в 2 способах. Первый описывает как это сделать на чистом js, а второй — при помощи jQuery.

А на сегодня — все. Если возникнут вопросы — смело задавайте их в комментариях.

Исходник пульсирующей кнопки

Размер: 0,004 мб

Раскрывающийся список и текстовая область Теги разметки страницы МЕНЮ

HTML тег используется для размещения кнопки. Внутри тега вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега (c атрибутом type = «button»).

Атрибут type тега задает тип, используемой кнопки:

Всегда указывайте для тега тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент для отправки HTML форм.

Давайте рассмотрим пример использования:

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

Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.

Кнопка наверх: HTML+CSS

Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:

<!DOCTYPE html>         />    Кнопка наверх с помощью CSS - "Нубекс"        .topNubex {  position: fixed;  right: 45px;  bottom: 45px;     }                     Вверх     

К недостаткам данного способа относится то, что в таком случае прокрутка не может быть плавной и посетитель мгновенно перенаправляется в верхнюю часть страницы.

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

<!DOCTYPE html>         />    Кнопка "Вверх" при помощи JavaScript - "Нубекс"            #topNubex {  position: fixed;  right: 45px;  bottom: 45px;     }                                               

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий