:root {
  --color-custom: #d70000;
}

/* Estilos para el botón */
.custom-button {
  position: relative; /* Para posicionar el pseudo-elemento correctamente */
  overflow: hidden; /* Para ocultar el pseudo-elemento cuando no está activo */
  display: inline-block; /* Mantiene el comportamiento en línea */
  justify-content: center; /* Centra el contenido */
  transition: all 0.5s ease; /* Transición para cambios de color */
  border-radius: 1rem; /* Esquinas redondeadas */
  background-color: var(--color-custom); /* Color de fondo inicial */
  color: #ffffff; /* Color del texto */
}

/* Pseudo-elemento para el efecto de fondo */
.custom-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* Comienza fuera de la vista a la izquierda */
  width: 100%;
  height: 100%;
  background-color: var(
    --color-custom
  ) !important; /* Color de fondo al pasar el ratón */
  transition: left 0.5s ease; /* Transición para el movimiento hacia la derecha */
  z-index: 0; /* Debe estar detrás del contenido del botón */
}

/* Asegúrate de que el contenido del botón esté sobre el pseudo-elemento */
.custom-button > * {
  position: relative; /* Para que los íconos y el texto estén sobre el pseudo-elemento */
  z-index: 1;
}

/* Al pasar el ratón sobre el botón */
.custom-button:hover::before {
  left: 0; /* Mueve el pseudo-elemento hacia la derecha */
}