.custom-button {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #999933;
  color: #fff;
  padding: 1px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.button-text {
  display: inline; /* Ahora el texto siempre estará visible */
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 10px;
  background-color: #999933;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px; /* Tamaño de fuente del texto */
}

.custom-button i {
  font-size: 25px; /* Tamaño del icono de Font Awesome */
}

/* Cambia el color del icono o del texto al pasar el ratón sobre el botón */
.custom-button:hover .button-text {
  color: #000000; /* Cambia el color del texto cuando el ratón esté sobre el botón */
}

.custom-button:hover i {
  color: #000000; /* Cambia el color del ícono cuando el ratón esté sobre el botón */
}