¿Cómo crear un botón HTML?

El desarrollo web y el diseño siempre son temas que generan curiosidad, por eso hoy te explicamos como crear un botón HTML, pero también en CSS.

Debes saber que, por lo general, las páginas web llevan botones personalizables. Ya sea tengas un ecommerce, landing page, blog, tienda o cualquier otro tipo de plataforma ¡siempre habrá botones realizando cualquier acción!

¿Cómo diferenciar crear un botón HTML o un botón CSS?

Ante de iniciar, ten claro que lo más común es generar el botón con una estructura predeterminada HTML, mientras que la parte personalizable se realiza con CSS, de esta forma puedes ir comprendiendo mejor el proceso de creación.

El botón HTML es básicamente una “máscara” que cubre el enlace o link que lleva a determinada página web, es decir una HTML. Es simplemente la parte visual y bonita.    

Cuando hablamos de un botón CSS es un botón al que se le ha dado un estilo. El CSS te permite personalizar un botón HTML de modo que, basándote en códigos, le des el color, la forma o el efecto que deseas.   

¿Cómo crear un botón HTML?

1. Genera el link

Copia el HTML o escribe el link que deseas aplicar en el enlace al que llevará el botón. Luego debes darle la estructura ya sea en WordPress (editor de texto), en un bloc de notas o en el programa en el que estés desarrollando la web.

2. Dale estructura

Para crear un botón HTML, el link debe ir encerrado entre las etiquetas <a></a> y también el texto que identificará el botón.

También se incluye la referencia href= antes de pegar el link, esta es justo la referencia que “da la orden” de a donde va a redirigir el botón al presionarlo o clicar en él. Con el atributo href= haces que tu botón sea completamente funcional.

DATO IMPORTANTE: Cuando trabajas con formularios, las etiquetas a usar son <button></button>.

Así es como debe lucir el código de tu botón:

<a href="http://tuweb.com">Aquí tu botón</a>

Algo genial es que los botones pueden personalizarse con negritas, imágenes, saltos de línea, o cualquier otra característica. A continuación te explicamos un poco más.

3. Incluye los atributos

Atributos como href= son importantes, aunque hay otros que son opciones. Para personalizar por ejemplo las referencias class y target.

El atributo class te permite identificar un elemento, especialmente cuando aplicas un estilo determinado. Cuando lo agregas, el estilo se aplica a todos los elementos que acompañar dicho atributo.   

Con target le indicas al botón donde quieres que se abra la página, es decir en la misma pestaña o en otra, en caso que quieras que se abra en una pestaña nueva usas el atributo _blank

Así es como debería lucir tu código con atributos:

<a class="boton" href="http://laweb.com" target="_blank">Mi botón</a>

Hay otra forma de personalizar al crear un botón HTML y es con la referencia style, cuando lo usas puedes dar estilos en línea, en este caso puedes omitir el atributo class.

En este ultimo caso, así lucirá tu código:  

<a href="http://laweb.com" target="_blank" style="">Mi botón</a>

Si quieres poner saltos de línea, perfectamente puedes hacerlo con <hr> y dejar espacios simples con <br>

 <button> 
Mira aqui<b>Soy un botón</b>

<br>

<br>

Doy saltos de línea

<hr>

Y me puedes personalizar

<br>
</button>

Otra característica que le puedes dar es modificar el tamaño, usando atributos como width= y height=, luego de indicar los valores que definirán el tamaño.

 Si vas a poner una imagen como botón, entonces debes abrir tu código con <img src= y antes de cerrar tu código usas alt=, el resultado final lucirá así:

 <button>

<img src="https://www.tuweb.com/images/logo_principal_home.gif" width="261" height="35" alt="">

</button>

 Otros atributos que puedes aplicar  

• name: con él le puedes dar un nombre a tu botón botón, y el formulario guardará la configuración bajo ese nombre. Es básicamente darle una identidad o identificación.  
• disabled: si vas a deshabilitar un botón, entonces debes usar este atributo para lograrlo.
• value: con este atributo puedes darle al botón un valor que se enviará en un formulario, al momento de darle el submit. Esta característica puede variar de una plataforma a otra.
• type: permite indicar el tipo de botón que se mostrará, y como complemento se incluye otro atributo: submit para indicar que un botón enviará un formulario, reset si lo que deseas es un botón para borrar datos de un formulario y button si lo que quieres es un botón normal.

¿Cómo crear un botón CSS?

Luego de enseñarte a crear un botón HTML, también queremos enseñarte a crear un botón CSS.

A diferencia del primero que es un poco más automatizado, cuando trabajas con CSS (hojas de estilo) trabajas mucho más con códigos. Mantente atento a las indicaciones:

1. La estructura básica

Cuando trabajas con estilos, hay un punto de partida y se trata del atributo .boton

Un atributo de clase como este se ubica antes de las propiedades y valores de estilo. Cuando creas un botón con CSS debes encerrar el contenido del código en {}. Eso sí asegúrate que estén ambos signos, si falta uno, entonces el estilo no va a aplicarse.

La misma regla se aplica cuando usas las etiquetas <head></head>, en este caso, una abre y la otra cierra el código, y usualmente van dentro de <style></style>.

Es decir, tu código se verá así:

.boton {
propiedades y valores de estilo
} 

2. Estilos a utilizar

Hay algunas reglas de estilo que puedes usar para personalizar tu botón html, lo único que debes hacer es cambiar los valores según tus necesidades. Por ejemplo:

.boton {
border: 1px solid #2e518b; /*anchura, estilo y color borde*/
padding: 10px; /*espacio alrededor texto*/
background-color: #2e518b; /*color botón*/
color: #ffffff; /*color texto*/
text-decoration: none; /*decoración texto*/
text-transform: uppercase; /*capitalización texto*/
font-family: 'Helvetica', sans-serif; /*tipografía texto*/
border-radius: 50px; /*bordes redondos*/
}

Es importante que cada atributo que apliques vaya separado con ; de lo contrario, se podría ver afectado el atributo siguiente.

También puedes hacer comentarios dentro de tu CSS, solo debes usar /* */ recuerda que también abrir y cerrar. Incluir esta referencia o no, es completamente electivo.   

Atributos para personalizar un botón

Cuando vas a crear un botón HTML o CSS, siempre es útil contar con los códigos necesarios para personalizar. Por eso, aquí te compartimos algunos de los más útiles:

• Color: Indica al color que tendrá la letra. El código especifico lo puedes tomar de una paleta RGBA, RGB o HEX, cualquiera que consultes te mostrará el código de color correspondiente a cada tono.   
• Padding: Define la distancia entre el borde del botón y el texto, establecido por pixeles.
• Background-color: Específico el color que el botón tendra de fondo.
• Font-size: Indica el tamaño de letra y también se establece en pixeles.
• Font-wheight: Con este especificas el grosor que tendrán las letras. Mientras más alto sea, serán más gruesas.
• Border-radius: Consiste en el redondeado en las esquinas del botón. Mientras más pixeles, será mucho más redondeado el borde. Si quieres un botón sin bordes redondeados, simplemente no usas este atributo.
• Border: Puedes modificar el color y el grosor en pixeles del borde de tu botón usando este atributo.

• Text-decoration: Con esta referencia puede quitar el estilo subrayado que caracteriza tu enlace.
• Hover: Lo aplicas cuando quieres que el botón cambie de color o modifique su característica original al pasar el cursor.

Sea cual sea la referencia o característica con la que quieras personalizar o crear botón HTML o CSS, lo importante es que recuerdes que los atributos se ubican antes de la clase de botón y su respectivo enlace.  

En la web hay algunas opciones para practicar, una opción que te podemos recomendar es Codepen que te permite generar un código front-end para CSS, HTML y Javascript. También te permite tomar inspiración en otros diseñadores y desarrolladores web.   

Quizá quieras leer: ¿Por qué puede aparecer Not found – error 404?