1

pretendo que aparezcan dos botones en la pantalla (de background gris) cubriendo un 50% de ella cada uno. Uno de ellos de fondo negro y letra blanca, y el otro al contrario. Pero cuando ejecuto el código no se lee el texto, es como si la fuente esté con el color invertido.

<style type="text/css">
    .boton1 {
        background-color: white;
        border: 0;
        font-size: 100px;
        color: black;
        text-align: center;
        width: 50%;
        height: 100%;
        float: left;
    }
    .boton2 {
        background-color: black;
        border: 0;
        font-size: 100px;
        color: white;
        text-align: center;
        width: 50%;
        height: 100%;
        float: left;
    }
</style>

<html>
    <body background=grey>
        <button type="submit" class=boton2 name="isubmit" value="black">
        </button>
        <button type="submit" class=boton1 name="isubmit" value="white">
        </button>
    </body>
</html>

2 respuestas 2

2

El primer punto, es que el texto de una etiqueta de tipo button no va en el atributo value si no como texto entre la de apertura y cierre.

Es decir para solucionarlo basta con escribir para ambos casos:

    <button type="submit" class=boton2 name="isubmit">
      black
    </button>
    <button type="submit" class=boton1 name="isubmit">
      white
    </button>

Te debes de valer del atributo value cuando declaras un botón pero por medio de la etiqueta input la cual solo tiene una de apertura pero no de cierre y le declaras los siguientes atributos:

  • type: Que sería una declaración de tipo button
  • value: Que sería el texto que deseas aparezca en el botón

Por otro lado opino que:

  • No es necesario hacerlos flotantes, ya tenemos a flexbox
  • No le coloques estilos inline a las etiuetas, es decir directo en el HTML, de todos modos cuando cubres con los botones este será imperceptible
  • valores CSS que vayan a ser comunes como el border a los botones mejor declaralo dentro de variables y que sean estas las que invoques
  • A los dos botones los envolvemos dentro de un contenedor para poder hacerlos elementos flexibles

    <style>
      :root {
        --medida-borde-boton: 0;
      }
      body {
        margin: 0;
      }
      .botones {
        border: 2px solid gray;
        display: flex;
      }
      .boton2, 
      .boton1 {
        height: 100vh;
        outline: none;
        width: 50vw;
      }
      .boton2 {
        background-color: black;
        border: var(--medida-borde-boton);
        color: white;
      }
      .boton1 {
        background-color: white;
        border: var(--medida-borde-boton);
      }
    </style>
    
    <html>
        <body>
        <section class="botones">
            <button type="submit" class=boton2 name="isubmit">
              black
            </button>
            <button type="submit" class=boton1 name="isubmit">
              white
            </button>
        </section>
        </body>
    </html>

2
  • Muchísimas gracias. Soy todo un novato en esto del html. el 13 abr. 2020 a las 13:38
  • @armel.guido hice una pequeña edición agregando un bode de 1 px de color gris al contenedor de los botones
    – BetaM
    el 13 abr. 2020 a las 13:58
0

he visto que tienes fallos en los elementos html button y al aplicar el color del fondo.

El color de fondo si quiere añadir css en línea tienes que usar el atributo style en el elemento, ejemplo:

<p style="font-size: 23px;">Hola soy un mensaje</p>

Aquí tienes un ejemplo de las correcciones con el elemento button y el color de fondo de body.

Hice un ejemplo:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Prueba</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        .boton1 {
            background-color: white;
            border: 0;
            font-size: 100px;
            color: black;
            text-align: center;
            width: 50%;
            height: 100%;
            float: left;
        }

        .boton2 {
            background-color: black;
            border: 0;
            font-size: 100px;
            color: white;
            text-align: center;
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body style="background-color:grey;">
    <button type="submit" class="boton2" name="isubmit">Black</button>
    <button type="submit" class="boton1" name="isubmit">White</button>
</body>

</html>

Ojo, el elemento button no lleva el atributo "value" el mensaje que quieras añadirle al button se aplica de la siguiente forma:

<button type="submit" class="boton1" name="isubmit">Hola soy el texto del button</button>

Espero haber ayudado.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.