Анимированная кнопка на JS и CSS

Прекрасная кнопка с красивой анимацией, где переменены градиенты с использованием JS и CSS, что реагирует на наведенный курсор на ее. Сама суть состоит в том, если на стандартной кнопки, что аналогично подключены на стилистику, и там есть оригинальные и вполне уникальные по своему дизайн варианты.

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

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

HTML

<button class="singkapvo-gesionalem"> 
<span>Нужно навести на кнопку клик</span> 
</button>

CSS

.singkapvo-gesionalem { 
  position: relative; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  background: #f50b46; 
  padding: 25px 30px; 
  border: none; 
  color: #e4e4e4; 
  font-size: 23px; 
  cursor: pointer; 
  outline: none; 
  overflow: hidden; 
  border-radius: 85px; 
} 
   
.singkapvo-gesionalem span { 
position: relative; 
pointer-events: none; 
} 
   
.singkapvo-gesionalem::before { 
  --size: 0; 
  content: ''; 
  position: absolute; 
  left: var(--x); 
  top: var(--y); 
  width: var(--size); 
  height: var(--size); 
  background: radial-gradient(circle closest-side, #4510dc, rgba(255, 255, 255, 0)); 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
  transition: width .1s ease, height .3s ease; 
} 
   
.singkapvo-gesionalem:hover::before { 
--size: 397px; 
}

JS

<script> 
document.querySelector('.singkapvo-gesionalem').onmousemove = function (e) { 
var x = e.pageX - e.target.offsetLeft; 
var y = e.pageY - e.target.offsetTop; 
e.target.style.setProperty('--x', x + 'px'); 
e.target.style.setProperty('--y', y + 'px'); 
}; 
</script>