Creando un botón clickable en HTML

Introducción

El elemento HTML <button> se utiliza para crear un botón en una página web que se puede utilizar para realizar ciertas acciones. En este tutorial, aprenderemos cómo crear un botón utilizando HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 86%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crea el archivo HTML

Crea un archivo HTML llamado index.html. En este archivo, crearemos una estructura básica de HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body></body>
</html>

Crea un botón

Para crear un botón, utilizamos el elemento HTML <button>. Podemos agregar texto, imágenes o contenido multimedia entre las etiquetas de apertura y cierre del elemento botón.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button>Click Me!</button>
  </body>
</html>

Agrega un atributo onclick

Podemos agregar un atributo onclick al elemento botón para ejecutar una función de JavaScript cuando se hace clic en el botón.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Agrega estilo CSS

Podemos utilizar CSS para dar estilo al botón según nuestras necesidades. Aquí agregamos algunos estilos CSS básicos para cambiar el color del texto, el color de fondo y el relleno del botón.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Verde */
        border: none;
        color: blanco;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Resumen

En este tutorial, aprendimos cómo crear un botón utilizando HTML. También aprendimos cómo agregar una función de JavaScript al elemento botón y aplicar estilos CSS al botón. Al dominar el elemento botón, puedes crear fácilmente botones para realizar acciones en tu página web.

Botón clickable en HTML