Forum Bookgame

Versión completa: CSS Fondo y Botones (opciones)
Actualmente estas viendo una versión simplificada de nuestro contenido. Ver la versión completa con el formato correcto.
¡Hola a tod@s!
Me presento rápido: Remm

Os dejo un código Big Grin  CSS que podéis copiar y pegar para cambiar los estilos a vuestros juegos:
Espero que os pueda servir de utilidad. Lo modificáis a vuestro gusto.

Se puede ver el resultado aquí:   El Extraordinario Humphrey Gobblegunk 
Es una aventura cortita que he creado de 7 capítulos al estilo Aventura gráfica.

Puedes jugarla y puntuarla, me sería de mucha ayuda ver opiniones.  Heart
¡¡Saludos y suerte con vuestros libros, algunos me encantan!!


Por cierto, los botones de Reinicio de juego (cuando mueres) hay que tratarlos a parte. Es el mismo código pero en vez de .boton y .boton:hover es .boton2 y .boton2:hover . 

CSS PARA BOTONES DE OPCIONES:

<style type="text/css">                                         
                                                      
                                                        
  /* Estilo personalizado para el botón */
  .boton {
    background-color: #FFD700; /* Color de fondo dorado */
    color: #000; /* Color de texto negro */
    padding: 15px 30px; /* Ajuste del espacio interno del botón */
    border: none; /* Elimina el borde del botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    font-size: 20px; /* Tamaño de fuente */
    border-radius: 10px; /* Bordes redondeados */
    text-decoration: none; /* Elimina cualquier decoración de texto (enlace) */
    display: inline-block; /* Hace que el botón se comporte como un bloque en línea */
    font-family: 'Georgia', serif; /* Fuente estilo Georgia */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra suave */
  }

  .boton:hover {
  background-color: #FFA500; /* Cambia el color de fondo al pasar el cursor (naranja) */
     transition: all 0.3s ease; /* Aplica una transición suave a todas las propiedades durante 0.3 segundos */
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3); /* Cambia la sombra al pasar el cursor */
  }
</style>



CSS PARA IMAGEN EN FONDO: (Aquí cambias mi imagen por la tuya)

<style type="text/css">
  .panel-body {
    background-image: url(https://i.ibb.co/9wQd3tr/fondo2.png);
    background-size: cover; /* Hace que la imagen de fondo cubra todo el elemento */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center center; /* Centra la imagen en el elemento */
    color: black;
  }
</style>
Muchas gracias por este aporte!
Muchas gracias