.du_btn_glow_rainbow_red {
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
/* Pseudo-elemento para el Efecto Glow (SIEMPRE VISIBLE) */
.du_btn_glow_rainbow_red::before {
content: '';
/* Gradiente con dominancia de Rojos */
background: linear-gradient(45deg,
#F20C1F, /* Rojo Intenso */
#FF3347, /* Rojo Brillante */
#FF7300, /* Naranja Brillante */
#F20C1F, /* Rojo Intenso */
#D81B60, /* Rosa Fuerte */
#AA00FF, /* Morado Intenso */
#C77DFF, /* Lila Claro */
#F20C1F /* Cierre: Vuelve al Rojo */
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
/* CLAVE: Opacidad 1 por defecto (siempre encendido) */
opacity: 1;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
/* Pseudo-elemento para el Fondo Interior */
.du_btn_glow_rainbow_red::after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
/* -------------------- ESTADOS INTERACTIVOS -------------------- */
/* El hover de opacidad ha sido eliminado ya que el glow está siempre encendido. */
/* Active (Al hacer clic): Cambia el color del texto a negro */
.du_btn_glow_rainbow_red:active {
color: #000;
}
/* Active: Hace transparente el fondo interior para que el glow se vea completamente */
.du_btn_glow_rainbow_red:active::after {
background: transparent;
}
/* -------------------- ANIMACIÓN -------------------- */
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}