Вы бы предпочли нажать кнопку, которая всплывает при наведении курсора, или кнопку, которая немного темнеет? Сделайте свои кнопки более захватывающими с помощью этого захватывающего руководства по кнопкам!

Любой, кто пользовался одной из этих кнопок пешеходного перехода, знает, что нажимать на них не так уж и весело. Они грязные, особо не давят, и обычно ничего не происходит. Кнопки в Интернете такие же. Разве не было бы приятнее, если бы кнопки, которые вы нажимали, действительно что-то делали, когда вы с ними взаимодействовали, кроме того, что они затемнялись при наведении курсора, а затем отправляли вас на другую страницу?

Эта кнопка просто просит, чтобы ее нажали, когда вы наводите на нее курсор. Создать его на самом деле очень просто и требуется примерно 30 строк кода. Даже меньше, если вы используете Sass! В этом руководстве я буду использовать только базовый HTML и CSS. Ничего нахального в этом.

Настройка HTML

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

Это все для HTML!

Реализация CSS

(Необязательно) Я стилизовал контейнер для центрирования кнопки с помощью гибкого блока. Для моего свойства view-height установлено значение 95 из-за нижней панели навигации, но для истинного центра установите значение 100. Justify content выравнивает все содержимое в контейнере по оси X, тогда как align items делает это по оси Y . Я хочу, чтобы они оба были по центру, чтобы кнопка находилась прямо посередине экрана.

Теперь стилизуем кнопку. Сначала я немного увеличиваю отступ, чтобы кнопка стала больше. Я также удаляю естественную границу, которая идет с элементами HTML кнопки, и устанавливаю радиус границы на 10 пикселей, чтобы края были более округлыми. Следующая часть немного сложнее с box-shadow. Свойство тени блока имеет несколько значений. Первое значение - это смещение по горизонтали, которое я установил на 0, потому что я вообще не хотел, чтобы тень смещалась вправо или влево. Следующее значение - это вертикальное смещение, которое я установил на 2 пикселя, чтобы создать иллюзию его выступа за пределы страницы. Затем идет значение размытия. Я установил 4 пикселя, чтобы уменьшить интенсивность тени. Последнее значение, которое я использую, это просто цвет тени блока. Есть и другие значения, которые вы можете использовать, такие как распространение тени, изменение тени блока на вставку вместо начала (по умолчанию) и многое другое. Посетите W3Schools для получения дополнительной информации. Наконец, я хочу, чтобы все мои переходы для зависания и активного происходили в течение 0,3 секунды. Это сглаживает анимацию.

Затем я задаю стиль кнопке при наведении на нее курсора. Я устанавливаю свойство курсора на указатель, чтобы при наведении курсора на кнопку пользователю было видно, что на кнопку можно щелкнуть. Чтобы создать движение, я трансформирую кнопку, перемещая ее по оси Y на -4 пикселя, что перемещает кнопку на 4 пикселя вверх. Чтобы создать иллюзию того, что кнопка действительно больше выступает из экрана при наведении курсора, я увеличиваю вертикальное смещение на 4 пикселя, а также увеличиваю размытие.

После этого я хочу стилизовать кнопку, когда по ней нажимают. Это будет состояние кнопки active. Активное состояние относится к состоянию кнопки по умолчанию, а не к состоянию кнопки при наведении курсора. Я установил свойство transform на перемещение по оси Y на 4 пикселя, что означает, что оно переместится на 4 пикселя вниз по сравнению с состоянием по умолчанию, равным 0 переведенным пикселям. Я установил вертикальное смещение тени блока на 1 пиксель и размытие на 1 пиксель, создавая иллюзию, что кнопка все еще там, но теперь нажата.

Наконец, я хочу удалить контур фокуса после того, как вы нажмете кнопку. Этого можно легко достичь, выбрав фокус кнопки и установив для ее контура значение none:

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