Cómo crear un botón en HTML y CSS

Un botón dentro de una página web te ayuda a llamar la atención de los usuarios para que realicen diferentes acciones dentro de ella, desde pedir información hasta enviar un formulario. Por eso es esencial que los botones estén bien diseñados y su código sea correcto. 

Cuando un usuario mira un botón sabe que hay algo más y que puede hacer clic. En el mundo del marketing también es importante, ya que los botones representan una llamada a la acción o call to action (CTA).

En este artículo podrás ver cómo puedes crear un botón en HTML y CSS, con una explicación paso por paso. De esta forma verificarás que realmente es sencillo hacer un botón, con un conocimiento básico de HTML. 

1. Define la etiqueta de tu botón

Dentro de la programación web dividir las etiquetas de los botones en clases es muy eficiente a la hora de escribir el código de una forma más clara y organizada. Principalmente para «btn», que es la abreviación de botón, se usan diferentes clases con su propio significado. Enseguida te mostramos las más comunes.

• Btn primary: se le llama así para distinguirlo de un segundo botón o de un grupo de botones.
• Btn secondary: es un botón que se destaca de un primer botón o de un grupo de botones.
• Btn success: se usa dentro de un código para indicar una acción que se realiza de manera exitosa, por ejemplo: una vez que se rellena un formulario correctamente, el botón redirecciona a la página principal del sitio. Regularmente es un botón amarillo. 
• Btn info: se utiliza para brindar información al usuario y generalmente es de color azul.
• Btn warning: se emplea para advertir al usuario que está a punto de realizar una acción con la que debe tener precaución o cuidado, por lo cual el botón suele ser de color amarillo.
• Btn danger: sirve para indicar que la acción que realiza este botón es peligrosa, como borrar una cuenta o información definitivamente. Este botón es de color rojo.

Claro que tú puedes crear tus propias clasificaciones, pero si estás empezando a aprender tanto el código HTML y el CSS, estas categorías te serán de gran utilidad. Está el caso de algunos programadores que usan el «btn light» y el «btn dark» para distinguir dos botones. 

Para nuestro ejemplo, agregamos en la parte del cuerpo (body) una etiqueta de subtítulos (h2) nombrada «Botón de texto»; también vamos a retomar la etiqueta «btn success» para nuestro botón de la siguiente manera: <button class="btn success">Enviar</button>. Donde primero se indica que es un botón, la etiqueta y el texto que va a contener. Recuerda siempre poner las etiquetas de apertura y de cierre.

2. Cambia el color del texto

Respecto del texto del botón puedes agregar en él llamadas a la acción (CTA) para que los usuarios hagan clic con más facilidad. También para que este elemento sea más atractivo hay que cambiarlo de color, con ayuda del lenguaje CSS que se encarga de la apariencia de la página. Para ello es necesario una etiqueta <style> y realizar una declaración en el siguiente orden:

• Selector: es donde se indica qué elemento del documento se desea cambiar; es importante añadir la etiqueta del elemento correctamente.
• Propiedad: aquí se determina cuál es la característica que se quiere modificar del elemento; como el color, fuente, tamaño, opacidad, fondo, etc.
• Valor de propiedad: especifica la manera en que se aplicará la modificación al indicar los valores en números o códigos; como el nombre o código Hex del color, el tamaño en número de píxeles, entre otros.

Existen dos formas de cambiar el color del texto de la fuente y que también aplica para el cambio de color de todos los elementos de un documento HTML. De la primera manera, la más clásica, la declaración quedaría así: .success {color: green;}. Y el botón queda con un verde genérico.

Si quieres un tono en particular es posible recurrir al código Hex para indicar uno más específico, luego de un signo de número «#». En este caso hemos elegido un verde oliva y la declaración CSS ha quedado así: .success {color: #808000;}, dentro de la etiqueta <style>. Estos códigos los puedes encontrar fácilmente en bibliotecas de colores HTML en código Hex, código RGB o código HSL.

3. Ajusta las propiedades CSS

Para una mayor personalización de un botón es posible crear más declaraciones para cambiar la apariencia de este elemento, dentro de la misma etiqueta <style> con la que hemos trabajado. En este caso vamos a hacer una serie de declaraciones de la siguiente manera: indicamos selector .btn, para propiedades y valores de propiedades, y queda así:

• border: none. Para indicar quitar el borde del botón.
• background-color: inherit. Señala que el color de fondo sea el mismo que el verde original.
• padding: 14px 28px. Para establecer el espacio de relleno entre el contenido y el borde.
• font-size: 16px. Muestra el tamaño de la fuente de texto.
• cursor: pointer. Indica el icono de la mano como cursor, cuando se deslice sobre el botón.
• display: inline-block. Es para tratar al botón como bloque y que se ajuste a otros elementos en línea.

Luego, debajo de esta serie de declaraciones, colocamos la pseudo-clase hover para indicar que, cuando se pase el mouse sobre el botón, este cambie su apariencia, en este caso a un fondo gris (#eee), sin que necesariamente se haga clic directo sobre el elemento. Queda: .btn:hover {background: #eee;}. Del lado derecho vemos cómo se modifica el botón con el mouse encima.

4. Crea un fondo de color

También es posible hacer que las letras sean verdes y cuando pase el cursor encima se vuelvan blancas y aparezca un recuadro verde. Para ello, en el mismo lugar donde agregamos el hover, basta especificar el color de fondo de recuadro con el código Hex y el color de la fuente. Queda así como se muestra en la imagen cuando se pasa el cursor sobre él.

5. Guarda el código de tu botón

Te quedará un código similar a este:

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>.btn { border: none; background-color:#04AA6D; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block;}btn:hover {background: #eee:}.sucess:hover {background-color: #04AA6Dcolor: white}.success {color: white;}</style></head><body><h2>Botón de texto</h2><button class="btn success">Enviar</button></body></html>

Puedes agregar más propiedades y cambiar los valores de los que ya tienes hasta que el botón tome la apariencia que estás buscando. Una vez que hayas terminado, guarda tu código en un archivo de tu programa editor, para que posteriormente puedas insertar tu nuevo botón en tu sitio web.

Aquí tienes algunos de los mejores editores para crear un botón en HTML:

1. Notepad ++. En el nivel de principiantes, una excelente opción es Notepad ++, un software libre y de código abierto. Permite trabajar varios documentos al mismo tiempo gracias a sus funciones de pestañas, coloreado, envoltura de sintaxis, resaltado de paréntesis, entre otras. Es un editor de código de fuente que soporta una gran variedad de lenguajes de programación, como HTML, CSS, CC, PHP, Pascal, JavaScript, etc. 
2. Visual Studio Code. Este editor de código abierto fue desarrollado por Microsoft para sistemas Windows, Linux, macOS y sitios web. Es muy utilizado por programadores debido a sus múltiples opciones que permiten desarrollar óptimos flujos de trabajo. Cuenta con función de depuración, control de versiones, deshilados, edición de múltiples cursores, ejecución de tareas, codificación IntelliSense y más.
3. EditPlus. Es un editor para Windows que ofrece opciones avanzadas, más allá de un bloc de notas. Cuenta con un resaltador de notas para lenguajes HTML, CSS, Java, PHP, C, C++, ASP, JavaScript, Python, VBScript y Ruby on Rails. Su navegador permite previsualizar las páginas HTML. Incluye funciones de FTP, FTPS y sftp; barra de herramientas; número de línea; regla; resaltado de URL; autocompletado; búsqueda y reemplazo; corrector ortográfico, entre otras. 
4. Brackets. Diseñado por Adobe, Brackets es un editor de código abierto para desarrollo web; es especialmente ligero y potente a la vez. Permite una edición rápida y limpia en lenguaje HTML, CSS y JavaScript. Cuenta con detección y corrección automática de código. Su vista previa dinámica permite ver en tiempo real la aplicación de los cambios realizados en el código fuente.
5. Codelobster. Es un entorno de desarrollo integrado (IDE) inicialmente creado para PHP, pero que soporta perfectamente otros lenguajes como HTML, CSS y JavaScript. Cuenta con las funciones de resaltado, autocompletado de código, depurador PHP, validador de código, ayuda especial, entre otras. Es útil para sistemas Windows, Linux y macOS y está disponible en diferentes idiomas. 

¿Cómo centrar un botón en HTML?

Uno de los pasos recurrentes en la programación web es centrar un botón en medio de un documento HTML. En muchas ocasiones basta con agregar las propiedades margin-right y margin-left, ambos con un valor: auto. 

Aun así, en los elementos que tengan la propiedad «display: inline-block», como es el caso de nuestro ejemplo y de los archivos de imagen, es necesario agregar antes la propiedad «display: block». Luego de ello ya puedes añadir «margin-right: auto» y «margin-left: auto». Después de actualizar el código, ya es posible ver cómo el botón se mueve en el centro del documento, como se puede apreciar en la imagen. 

Si quieres ver este proceso en acción, consulta el siguiente video de Facultad Autodidacta:

Hasta aquí hemos llegado con el paso a paso para crear un botón en HTML. Habrás conocido ya lo esencial para crear tu propio botón y cómo centrarlo en un sitio web. Si estás empezando en el mundo de la programación web, recuerda que lo más importante es la práctica para ir mejorando la escritura de los códigos de fuente.