BotonGradienteAzul – webgenio.com

:root {
  /* Naranja semi-transparente para el aspecto acristalado */
  --btn-gradient-start: rgba(255, 165, 0, 0.4); /* Naranja claro, 40% opacidad */
  --btn-gradient-end: rgba(255, 140, 0, 0.5);   /* Naranja oscuro, 50% opacidad */
  --btn-text-color: #ffffff;
  --btn-padding: 12px 28px;
  --btn-border-radius: 8px;
  --btn-font-size: 1.1rem;
  --btn-transition-duration: 0.3s;
  --btn-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra inicial sutil */

/* Resplandor celeste brillante para hover */
  --btn-hover-glow-color: rgba(0, 191, 255, 0.7); /* DeepSkyBlue con opacidad */
  --btn-hover-box-shadow: 0 0 20px var(--btn-hover-glow-color); /* El resplandor */

/* Estados de Active (ajustar para ser más opaco/intenso y mantener estilo) */
  --btn-active-gradient-start: rgba(255, 140, 0, 0.6);
  --btn-active-gradient-end: rgba(255, 165, 0, 0.7);
  --btn-active-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) inset;

/* Estados de Focus */
  --btn-focus-outline-color: var(--btn-hover-glow-color); /* Anillo de enfoque celeste */

/* Estados de Disabled */
  --btn-disabled-bg-color: rgba(204, 204, 204, 0.5); /* Gris semi-transparente */
  --btn-disabled-text-color: #666666;
  --btn-disabled-box-shadow: none;
}

/* Contenedor para demostrar el uso de Grid y centrar los botones */
.button-container {
  display: grid;
  /* place-items: center; /* Centra los elementos horizontal y verticalmente */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ejemplo para múltiples botones */
  gap: 20px;
  align-items: center; /* Centra verticalmente dentro de la celda */
  justify-items: center; /* Centra horizontalmente dentro de la celda */
  min-height: 200px; /* Altura mínima para visualizar el centrado */
  background-color: #f0f0f0; /* Color de fondo solo para visibilidad */
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto; /* Centrar el contenedor en la página */
  max-width: 600px;
}

/* Estilos Base del Botón */
.btn {
  /* Reset */
  border: none;
  cursor: pointer;
  -webkit-appearance: none; /* Reseteo para Safari/iOS */
  -moz-appearance: none;    /* Reseteo para Firefox */
  appearance: none;         /* Reseteo general */

/* Disposición y Tamaño */
  display: inline-flex; /* Usar flexbox para centrar el contenido */
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna */
  font-size: var(--btn-font-size);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap; /* Prevenir el salto de línea del texto */

/* Colores y Fondo - Adaptados para aspecto acristalado naranja semitransparente */
  background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
  color: var(--btn-text-color);
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde blanco sutil para el efecto de cristal */
  backdrop-filter: blur(10px); /* Efecto de desenfoque para el vidrio */
  -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con navegadores basados en WebKit */

/* Efectos */
  box-shadow: var(--btn-box-shadow);
  transition: all var(--btn-transition-duration) ease-in-out;
  position: relative; /* Para pseudo-elementos */
  overflow: hidden; /* Para efectos de pseudo-elementos que puedan extenderse */
  z-index: 1; /* Asegurar que el contenido del botón esté por encima de los pseudo-elementos */
}

/* Pseudo-elemento para un sutil brillo interior/borde en hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit; /* Heredar el border-radius del padre */
  background: rgba(255, 255, 255, 0.1); /* Superposición blanca sutil */
  opacity: 0;
  transition: opacity var(--btn-transition-duration) ease-in-out;
  pointer-events: none; /* Permitir que los clics pasen a través */
  z-index: 2; /* Asegurarse de que esté por encima del fondo pero debajo del texto */
}

.btn-text {
  position: relative; /* Asegurar que el texto esté por encima de ::before y ::after */
  z-index: 3;
}

/* Estado de Hover */
.btn:hover {
  /* Mantener el fondo base semi-transparente y aplicar solo el resplandor */
  background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
  box-shadow: var(--btn-hover-box-shadow); /* Aplicar el resplandor celeste brillante */
  transform: translateY(-2px); /* Ligero efecto de elevación */
}

.btn:hover::before {
  opacity: 1; /* Mostrar la superposición en hover */
}

/* Estado de Active */
.btn:active {
  background: linear-gradient(135deg, var(--btn-active-gradient-start), var(--btn-active-gradient-end));
  box-shadow: var(--btn-active-box-shadow);
  transform: translateY(0); /* Volver a la posición original */
}

/* Estado de Focus */
.btn:focus-visible { /* Usar :focus-visible para mejor accesibilidad */
  outline: none; /* Eliminar el contorno por defecto */
  box-shadow: 0 0 0 3px var(--btn-focus-outline-color), var(--btn-box-shadow); /* Anillo de enfoque personalizado con el color del resplandor */
}
/* Fallback para navegadores que no soportan :focus-visible */
.btn:focus:not(:focus-visible) {
  outline: none; /* Eliminar el contorno si no es visible */
}

/* Estado de Disabled */
.btn:disabled {
  background: var(--btn-disabled-bg-color);
  color: var(--btn-disabled-text-color);
  cursor: not-allowed;
  box-shadow: var(--btn-disabled-box-shadow);
  transform: none; /* Eliminar cualquier transformación */
  pointer-events: none; /* Prevenir cualquier interacción de hover/active */
  opacity: 0.8; /* Atenuar el botón y mantener cierta transparencia */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil para disabled */
}

.btn:disabled::before {
  opacity: 0; /* Ocultar pseudo-elemento para el estado deshabilitado */
}