5 элегантных эффектов CSS Hover для вашего сайта [2023]

Большинство современных веб-сайтов используют каскадные таблицы стилей (CSS). Некоторые сайты используют базовые функции CSS, в то время как другие используют расширенные функции, чтобы сделать свои веб-приложения более привлекательными.

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

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

Содержание

0.1 Что такое эффект наведения CSS?
0.2 Типы эффектов наведения CSS

1 Изменить цвет фона при наведении
2 Изменить цвет ссылки при наведении
3 Скользящая подсветка при наведении курсора
4 Подчеркивание радуги при наведении
5 Замена текста при наведении

Что такое эффект наведения CSS?

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

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

Переходы

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

Анимации

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

Типы эффектов наведения CSS

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

№1. Эффекты перехода текста

Такие эффекты подходят, когда вы хотите создать минималистичный сайт. Дизайн должен быть простым, но при этом передавать сообщение. Он может быть в следующих формах:

Терминальный текстовый эффект: этот эффект имитирует набор текста в текстовом процессоре. Слова будут мигать, но скорость должна быть достаточной, чтобы пользователи могли их прочитать.
Текстовая анимация: текст в этом эффекте может перемещаться вверх, вниз или в сторону.

№ 2. Эффекты перехода по ссылке

Типичный веб-сайт будет иметь различные гиперссылки, которые перенаправляют пользователей на разные страницы. Количество таких ссылок увеличивается по мере роста сайта. В этих формах могут проявляться эффекты перекрестных связей;

Изменение цвета ссылки: цвет ссылки с синего на красный.
Изменить цвет фона: этот эффект изменяет цвет фона ссылки.
Заменить текст: этот эффект изменяет содержимое значка ссылки.

№3. Эффекты перетаскивания кнопок

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

Изменение цвета текста: цвет текста кнопки «Нажми меня» может меняться с красного на зеленый при наведении курсора.
Изменить цвет фона: HTML-кнопки по умолчанию прозрачны. Разработчики могут добавить к таким кнопкам цвет фона. При наведении цвет фона может меняться от коричневого до зеленого.
Эффект отскока: вы можете добавить визуальную привлекательность пользователю, создав кнопку отскока при наведении.

№ 4. Эффекты наведения изображения

Замена изображений: вы можете создать карусель изображений, которая меняется при наведении.
Постепенное появление/исчезновение изображений: этот эффект делает изображения более четкими при наведении на них курсора.

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

Теперь мы можем объяснить некоторые элегантные эффекты наведения CSS для вашего веб-сайта.

Изменить цвет фона при наведении

Этот эффект можно применить к кнопкам, ссылкам или тексту, отображаемому на веб-странице. Когда курсор мыши касается цели, цвет фона меняется.

В этих шагах вы можете изменить фон вашего текста;

Используйте псевдокласс :hover для достижения своих целей
Создайте элемент, например div, кнопку или ссылку, к которым вы будете применять эффект наведения.

Это пример кода для реализации этих эффектов.

HTML-файл

Document

Hover and see me change!!!!!

CSS-файл

div:hover {

    background-color: rgb(255, 0, 0); 

    width: 18rem;

    align-items: center;

    text-align: center;

  }

Перед зависанием вывод будет;

После зависания вывод будет;

Изменить цвет ссылки при наведении

Ссылки являются важными элементами веб-сайта, поскольку они помогают нам переходить с одной страницы на другую. Мы используем теги HTML для создания гиперссылок. Изменение цвета ссылки при наведении увеличивает ее видимость.

Нам нужно следующее, чтобы продемонстрировать этот эффект:

Создайте тег селектора в теге :head или :body
Определите псевдокласс :hover

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

HTML-файл:






    

    

    

    Document

CSS-файл:

a:link {

    color: rgb(0, 255, 34);

  }

  a:hover {

    color: #ff8400;

  }

Выйти перед зависанием;

Выход после эффекта наведения;

Скользящая подсветка при наведении курсора

Когда пользователь наводит курсор, этот эффект добавит тень к встроенной ссылке. Цвет ссылки будет изменен в процессе. Чтобы достичь этого, вы можете выполнить следующие шаги в качестве руководства;

Добавьте отступы по всей ссылке (может подойти что-то вроде 0,25rem)
Добавьте маржу аналогичного значения. Это предотвращает вмешательство отступов в поток текста.

Вы можете использовать это как простой html-файл:






    

    

    

    Document

    techblog.co.rs

Это может быть ваш файл CSS;

a {

    box-shadow: inset 0 0 0 0 rgb(255, 21, 0);

    color: #ff4000;

    padding: 0 .25rem;

    margin: 0 -.25rem;

    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;

  }

  a:hover {

    color: #fff;

    box-shadow: inset 200px 0 0 0 #ff4000;;

  }


  a {

    color: #ff4000;

    font-family: 'Poppins', sans-serif;

    font-size: 27px;

    font-weight: 700;

    line-height: 1.5;

    text-decoration: none;

  }

  body {

    display: grid;

   

  }

До эффекта наведения;

После эффекта наведения;

Подчеркивание радуги при наведении

Этот эффект добавляет разноцветное подчеркивание к тексту при наведении курсора.

Использование: псевдокласс линейного градиента для создания плавного перехода между разными цветами.
Используйте псевдокласс :hover для достижения своих целей.
Создайте элемент ссылки, к которому вы будете применять эффект наведения.

Вот пример кода для реализации радужного подчеркивания при наведении:

HTML-файл:






    

    

    

    Document

      

      



    

        This is Rainbow hover effect.

CSS-файл:

p {

  max-width: 800px;

  margin: auto 15%;

  line-height: 1.1;

  font-size: 78px;

  font-weight: 700;

  letter-spacing: .0125em;

  color: black;

}

a {

  display: inline-block;

  position: relative;

  text-decoration: none;

  color: inherit;

  z-index: 1;

}

a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: .07em;

  height: .1em;

  width: 100%;

  background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);

  z-index: -1;

  transition: height .25s cubic-bezier(.6,0,.4,1);

}

a:hover::after {

  height: .2em;

}

  p {

    font-size: 58px;

  }

Перед зависанием;

После зависания;

Замена текста при наведении

Тестовая замена — это когда текст заменяется другим фрагментом содержимого или текста, когда пользователь наводит курсор на цель. Прекрасный пример — когда на веб-сайте есть ссылка «комментарии». После наведения текст ссылки может измениться на «Комментарий».

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

Псевдоэлементы ::before и ::after Создают отдельный текстовый элемент, который заменяется после наведения.
:hover Псевдоэлемент, изменяющий положение или видимость контента при наведении.

Вот иллюстрация того, как применить этот эффект:

HTML-файл:






    

    

    

    Document

CSS-файл:

button { width: 10em } 

button { height: 3em } 

button:hover span { display: none } 

button:hover:before { content: "Add a Comment" }

Перед зависанием;

После зависания;

Сайты с отличными эффектами при наведении

Если вы хотите позаимствовать идеи и получить вдохновение, загляните на эти веб-сайты.

№1. Канва

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

№ 2. Дом

House — прекрасный пример сайта, который реализует подчеркивание при наведении, замену текста при наведении и изменение цвета фона при наведении.

№3. Основные работы

Mainworks также реализует анимацию и переходы для эффектов наведения. Некоторые заметные эффекты включают замену текста при наведении, изменение цвета текста и масштабирование текста и изображений при наведении.

Заключение

Выбор эффектов наведения для добавления на ваш сайт будет зависеть от типа вашего сайта, навыков, вкусов и предпочтений. Некоторые сайты, такие как арт-платформы и купонные платформы, могут приветствовать супер-яркие эффекты при наведении курсора. С другой стороны, юридические и медицинские веб-сайты могут выбирать минимальные эффекты при наведении курсора.
Поэтому вам нужно выяснить, что работает для вашего сайта. Однако убедитесь, что эти эффекты сочетаются с цветами вашего бренда. Ознакомьтесь с нашими лучшими ресурсами CSS, чтобы освежить свои навыки CSS.

Поделиться в соцсетях