Для создания css glowing background effect с плавной и красивой анимацией, можно использовать свойство box-shadow и анимировать его с помощью CSS transitions или keyframe animations. Пример использования CSS transitions:

.button {
  background-color: #f44336;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 16px;
  transition: box-shadow 0.3s ease-in-out;
}

.button:hover {
  box-shadow: 0 0 15px #f44336;
}

Здесь мы используем свойство box-shadow с тремя значениями - горизонтальным смещением, вертикальным смещением и размером размытия тени. При наведении на элемент, мы добавляем более сильную тень, создавая эффект свечения. Мы также использовали CSS transitions, чтобы сделать переход между состояниями более плавным. Пример использования keyframe animations:

.button {
  background-color: #f44336;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 16px;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px #f44336;
  }
  100% {
    box-shadow: 0 0 20px #f44336;
  }
}

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