En este tutorial se explica como hacer un botón HTML. Explicamos desde un botón sencillo, hasta como personalizar el color y texto, además como realizar diversas acciones cuando se presiona el botón.
Lo que aprenderás en este tutorial es cómo crear un botón en HTML, cómo personalizarlo con estilos, y cómo agregarle una acción al presionarlo.
1. Crear un Botón Simple
Vamos a comenzar creando un simple boton, lo más básico para familiarizarnos un poco con el entorno de html.
Para hacerlo se utiliza la etiquta <button>. Dentro de ésta se encuentra toda la configuración que le podemos hacer al botón.
A continuación mostramos el código:
Código básico de un boton html:
<html>
<head>
<title>Botón Simple</title>
</head> <body>
<button>Presióname</button>
</body>
</html>
Creamos el botón dentro del body, y simplemente indicará la palabra presióname, sin ningún efecto al presionarlo y con la configuración predeterminada. Esto es lo que veremos.
Explicación:
- La etiqueta
<button>genera un botón básico. - El texto entre las etiquetas
<button>y</button>será el texto mostrado en el botón.
2. Personalizar el Botón con CSS
Podemos usar CSS para cambiar el estilo del botón y hacerlo más atractivo.
Para esto dentro del head, creamos un estilo que llamaremos, botón personalizado.
En el siguiente código, creamos ese estilo que se aplicará a todos los botones, ya que usamos la etiqueta button dentro del estilo.
Código:
<!DOCTYPE html>
<html>
<head>
<title>Botón Personalizado</title>
<style>
button {
background-color: #4CAF50; /* Verde */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049; /* Verde más oscuro al pasar el cursor */
}
</style>
</head>
<body>
<button>Botón Personalizado</button>
</body>
</html>
Este es el resultado de aplicar el código html anterior:
Explicación:
background-color: Cambia el color de fondo.color: Cambia el color del texto.padding: Añade espacio dentro del botón.border: Elimina el borde por defecto.border-radius: Redondea las esquinas del botón.font-size: Ajusta el tamaño del texto.cursor: Cambia el cursor a un icono de mano al pasar sobre el botón.:hover: Cambia el color del botón cuando el cursor está sobre él.
botónEl boton que mostramos anterior mente, esta creado en html, por lo que puedes ver el efecto de cada elemento en el boton.
3. Agregar una Acción al Presionar el Botón
Puedes usar JavaScript para agregar una acción cuando el botón es presionado.
Para agregar el evento de click dentro del boton se usa onclick dentro de button.
Algo asi: <button onclick="accion">.
en el siguiente ejemplo mostramos esto, llamando a una función que debe estar dentro de un script.
Código:
<!DOCTYPE html>
<html>
<head>
<title>Botón Personalizado</title>
<style>
button {
background-color: #4CAF50; /* Verde */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049; /* Verde más oscuro al pasar el cursor */
}
</style>
</head>
<body>
<button onclick="mostrarMensaje()">Botón Personalizado</button>
<script>
function mostrarMensaje() {
alert("¡Has presionado el botón!");
}
</script>
</body>
</html>
En el código anterior, al presionar el botón se abre un panel de alerta, que indica que se ha presionado el botón.
En el siguiente boton mostramos el html de esta arriba.
Explicación:
onclick: Es un atributo de HTML que ejecuta una función de JavaScript al presionar el botón.mostrarMensaje(): Es una función en JavaScript que muestra un mensaje emergente (alerta) al usuario.
Resultado: Cuando presiones el botón, aparecerá un mensaje con el texto “¡Has presionado el botón!”.
4. Botón con Acción Más Compleja, como hacer un botón HTML
Puedes usar JavaScript para realizar tareas más complejas, como cambiar el contenido de la página.
Código:
<!DOCTYPE html>
<html>
<head>
<title>Botón Avanzado</title>
<style>
button {
background-color: #4CAF50; /* Verde */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049; /* Verde más oscuro al pasar el cursor */
}
</style>
</head>
<body>
<p id="mensaje">Este texto cambiará al presionar el botón.</p>
<button onclick="cambiarTexto()">Cambiar Texto</button>
<script>
function cambiarTexto() {
document.getElementById("mensaje").innerHTML = "¡El texto ha cambiado!";
}
</script>
</body>
</html>
Este texto cambiará al presionar el botón.
Explicación:
document.getElementById("mensaje"): Selecciona el elemento con elid“mensaje”..innerHTML: Cambia el contenido HTML del elemento seleccionado.
Resultado: Al presionar el botón, el texto en el párrafo cambiará dinámicamente.
Conclusión
En este tutorial aprendiste a:
- Crear un botón simple en HTML.
- Personalizar el botón usando CSS.
- Agregar acciones básicas y avanzadas al botón con JavaScript.
Estos conocimientos básicos son muy útiles para proyectos web interactivos. ¡Inténtalo y personaliza tus botones!
Para más tutoriales de html, ve a este enlace.
Algunos temas que pueden ser de tú interés: