#container {
      position: relative;
      display: inline-block;
  }
  
  #miBoton {
      position: relative;
      background-color: #87CEFA; /* Fondo azul suave */
      color: black;
      padding: 10px 20px;
      border: 2px solid #87CEFA; /* Borde azul suave */
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
      box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Sombra inicial azul */
      z-index: 1;
      animation: float 3s ease-in-out infinite; /* Animación de flotación */
  }
  
  #borderAnimation {
      position: absolute;
      top: -3px;
      left: -3px;
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      border-radius: 5px;
      box-sizing: border-box;
      border: 1px solid transparent;
      background: linear-gradient(90deg, transparent, rgba(0, 0, 255, 0.5), transparent); /* Degradado azul */
      animation: borderMove 2s linear infinite;
      z-index: 0;
      pointer-events: none;
  }
  
  @keyframes borderMove {
      0% {
          background-position: 0% 0%;
      }
      100% {
          background-position: 100% 100%;
      }
  }
  
  @keyframes float {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-10px);
      }
  }
  
  #miBoton:hover {
      background-color: #00BFFF; /* Fondo azul más brillante cuando pasa el cursor */
      color: black;
      border-color: #00BFFF; /* Borde azul más brillante cuando pasa el cursor */
      box-shadow: 0 0 10px rgba(0, 0, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.5); /* Efecto luminoso azul */
      transform: scale(1.1);
  }
  
  #miBoton:active {
      background-color: #1E90FF; /* Fondo azul oscuro cuando se presiona */
      color: white;
      box-shadow: 0 0 5px rgba(0, 0, 255, 0.5), 0 0 10px rgba(0, 0, 255, 0.3);
      transform: scale(0.95);
  }