Button with glow effect on hover

selector {
  --hover-color: var(--bb-attr--hover-color, #fff);
  --hover-bg: var(--bb-attr--hover-bg, #000);
  --active-color: var(--bb-attr--active-color, #fff);
}
selector .wp-element-button {
  position: relative;
  z-index: 0;
  cursor: pointer;
  border-radius: 10px;
}
selector .wp-element-button:not(.has-color) {
  color: var(--hover-color);
}
selector .wp-element-button:not(.has-background) {
  background: var(--hover-bg);
}
selector .wp-element-button::before,
selector .wp-element-button::after {
  position: absolute;
  z-index: -1;
  content: '';
  border-radius: inherit;
}
selector .wp-element-button::before {
  top: -2px;
  left:-2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  filter: blur(5px);
  opacity: 0;
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
}
selector .wp-element-button::after {
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  background: inherit;  
}
selector .wp-element-button:hover {
  color: var(--hover-color) !important;
  background: transparent !important;
  transition: all .3s ease-in-out;
}
selector .wp-element-button:hover::before {
  opacity: 1;
}
selector .wp-element-button:hover::after {
  background: var(--hover-bg);
}
selector .wp-element-button:active {
  color: var(--active-color) !important;
}
selector .wp-element-button:active::after {
  background: transparent;
}
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}