ZorNet.Ru — сайт для вебмастера » HTML и 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

Код

Чтобы эта анимация свечения звучала только тогда когда пользователь наводил кнопку над кнопкой, что используем 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 Просмотров: 1970 Комментариев: (0)

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

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

Kosten

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