ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как создать эффект Hover на чистом CSS

Как создать эффект Hover на чистом CSS

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

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

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

Мы будем писать довольно простой и простой CSS, чтобы добавить эффект свечения на кнопках при наведении.

Как пример, это светящиеся кнопки добавляют эффект к вашему дизайну.
Давайте создадим элемент тега, и к нему привязку.

Код
<a href="http://zornet.ru/">ZORNET.RU</a>

CSS

Код
a {
  background-color: #2b56a2;
  text-decoration: none;
  padding: 12px 21px;
  font-family: sans-serif;
  font-size: 23px;
  color: #fff;
  border-radius: 57px;
  display: inline-block;
  transition: .8s cubic-bezier(0.25, 0.1, 0.24, 0.9);
}
a:hover {
  -webkit-box-shadow: 0px 0px 100px 0px rgb(0, 117, 255);
  -moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  box-shadow: 0px 0px 100px 0px rgb(0, 115, 255);
  transition: .8s cubic-bezier(0.25, 0.1, 0.25, 0.88);
}

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

Демонстрация:

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

Код
<a href="#" class="sarunem">ZORNET.RU</a>

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

CSS
Код
.sarunem {
  background-color: #2b56a2;
  text-decoration: none;
  padding: 12px 21px;
  font-family: sans-serif;
  font-size: 23px;
  color: #fff;
  border-radius: 57px;
  display: inline-block;
  transition: .8s cubic-bezier(0.25, 0.1, 0.24, 0.9);
}

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

Код
.sarunem:hover {
  -webkit-box-shadow: 0px 0px 100px 0px rgb(0, 117, 255);
  -moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  box-shadow: 0px 0px 100px 0px rgb(0, 115, 255);
  transition: .8s cubic-bezier(0.25, 0.1, 0.25, 0.88);
}

И полные стили получаются так:

Код
.sarunem {
  background-color: #2b56a2;
  text-decoration: none;
  padding: 12px 21px;
  font-family: sans-serif;
  font-size: 23px;
  color: #fff;
  border-radius: 57px;
  display: inline-block;
  transition: .8s cubic-bezier(0.25, 0.1, 0.24, 0.9);
}
.sarunem:hover {
  -webkit-box-shadow: 0px 0px 100px 0px rgb(0, 117, 255);
  -moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  box-shadow: 0px 0px 100px 0px rgb(0, 115, 255);
  transition: .8s cubic-bezier(0.25, 0.1, 0.25, 0.88);
}

Обратите внимание, что эффект свечения достигается здесь используется sarunem:hover свойство. Мы используем тот же цвет на фоне кнопки и применяем непрозрачность 40% и более или меньше для определения.

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

Демонстрация:
21 Декабря 2017 Просмотров: 1860 Комментариев: (0)

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

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar