ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эффект для кнопки с наведением курсора

Эффект для кнопки с наведением курсора

Это оригинальный эффект для кнопки, который красиво смотрится при наведении курсора, когда градиент следует за курсором мыши при помощи CSS. Если кратко, то здесь подключаем JavaScript, где полностью отвечает за функцию при наведении курсора мыши на кнопку, где после чего появляется красочный градиент, который станет следовать за курсором при его перемещении, по всей площади элемента.

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

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

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

Как мы можем добиться такого же эффекта, чтобы наш веб-сайт тоже выделялся.

1. Выберите элемент и подождите, пока пользователь не проведет по нему мышью;
2. Рассчитать положение относительно элемента;
3. Сохранить координаты в переменных CSS;

HTML

Код

<button class="muginorma_tionkeno_mousanud"><span>ZORNET.RU</span></button>

CSS

Код

.muginorma_tionkeno_mousanud {
  position: relative;
  background: #5f67d0;
  padding: 0.7rem 1.3rem;
  font-size: 1.2rem;
  border: none;
  color: #f9f4f4;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.muginorma_tionkeno_mousanud span {
  position: relative;
}
.muginorma_tionkeno_mousanud::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.muginorma_tionkeno_mousanud:hover::before {
  --size: 200px;
}

Код

var btn = document.querySelector('.muginorma_tionkeno_mousanud')
btn.onmousemove = function(e) {
  var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
  var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
  btn.style.setProperty('--x', x + 'px')
  btn.style.setProperty('--y', y + 'px')
}

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

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

Второй вариант:

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

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

Отслеживание градиента курсора мыши осуществляется на CSS и Javascript.

1. Оберните текст внутри, где прописан span чтобы избежать появления градиента над ним;
2. Начните с a width, когда пользователь наведет курсор на кнопку, где не забываем установить переход;
3. Используйте координаты, чтобы следовать за мышью
4. Применить radial-gradient к background и использовать круг ближайшей стороны, где ближайшая сторона заполняет целом, а вот before не выходя за его пределы.

HTML

Код

<button class="nekousel_movemeb_konideudus">
<span>Великолепный эффект наведении клика</span>
</button>

CSS

Код

.nekousel_movemeb_konideudus {
  position: relative;
  appearance: none;
  background: #e61b4f;
  padding: 25px 38px;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 85px;
  }
  span {
  position: relative;
  pointer-events: none;
  }

  .nekousel_movemeb_konideudus::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4a17d8, transparent);
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
  }

  .nekousel_movemeb_konideudus:hover::before {
  --size: 400px;
  }

Код

document.querySelector('.nekousel_movemeb_konideudus').onmousemove = (e) => {

  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)

}

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

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

21 Мая 2019 Загрузок: 2 Просмотров: 1442 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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