Cómo cambiar la manera en que un botón HTML se ve

Escrito por sean mann | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Puedes cambiar la forma en que un botón HTML se ve con hojas de estilo en cascada (CSS) o mediante la sustitución del botón con su propia imagen. Esto es útil cuando deseas que el botón destaque o simplemente para darle tu propio estilo y look. Un uso común del botón HTML es para enviar formularios en una página Web. Ten cuidado al añadir el código CSS, ya que a veces aparece de manera diferente en distintos navegadores web, especialmente en versiones anteriores.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo de código fuente HTML en un editor de texto, como el Bloc de notas de Windows.

  2. 2

    Añade el código "type="image" y "src="myimagefile" a la etiqueta "<input>" de tu botón para reemplazar el botón HTML predeterminado con tu propio archivo de imagen. Por ejemplo, "<input type="image" name="submit" src="myimage.png"/>".

  3. 3

    Añade una hoja de estilo en cascada CSS dentro de la sección "<head>" de tu archivo HTML si sólo quieres modificar la apariencia general del botón HTML. Puedes cambiar atributos del botón, como el color de fondo, el tamaño de fuente, el espaciado y ancho de fuente. Por ejemplo, "<head><style type="text/css"> #mybutton {background-color: yellow; padding: 30px;} </style></head>".

  4. 4

    Añade tu hoja de estilo como "id="mystyle"" dentro de la etiqueta "<input>" donde el botón de tu formulario está ubicado en el archivo HTML. Por ejemplo, "<input type="submit" id="mybutton" value="search!" />" hará que tu botón tenga un fondo de color amarillo y más espaciado.

  5. 5

    Guarda el archivo HTML.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles