Cómo hacer un botón en HTML funcional y estiloso

Al margen de que el sistema HTML ya no está de moda, lo cierto es que en programación tienes que saber de este para crear enlaces a botones HTML que queden perfectos para webs, blogs e incluso para tu página de marca. Pero, ¿sabes cómo hacer un botón HTML funcional y estiloso? Te decimos cómo hacerlo.

Pasos para crear un botón HTML

Queremos ayudarte en tu web, blog… y por ello uno de los conocimientos que debes tener y que además es muy fácil de aprender es el código HTML. Este te permite cambiar una gran cantidad de cosas en el diseño de tu página. Uno de los elementos fundamentales son los botones, porque estos se vinculan con links para llevar al usuario a otros lugares de tu página o fuera de ellos. Pero, ¿sabes cómo se hace?

Los pasos fundamentales son los siguientes:

Crear la estructura básica

Todo botón HTML tiene la misma estructura. Se compone de un código que va a ser siempre el mismo, pero que cambia con respecto a lo que se quiera poner o enlazar. Uno sencillo sería:

<a href=»http://laweb.com»>Mi botón</a>

Ahora bien, esto solo logrará que tengamos un enlace, sin más, pero no se verá con el diseño de un botón (salvo que tengas formularios y uno de ellos sea para crear botones).

¿Cómo hacer que se vea así? Te lo contamos.

Añadir atributos de botón

Para que un botón HTML sea funcional y llamativo, es necesario darle la forma de botón. Por eso, a la hora de crearlo, tienes que tener en cuenta que se van a personalizar algunos elementos. Así, ese primer código, ya personalizado, quedaría así:

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

Darle color, tamaño…

Por último, en ese mismo código también puedes aplicar una línea de estilo (style) para determinar el tamaño del botón, de la fuente de letra, el color del botón sin pasar el ratón y pasándolo, etc.

La etiqueta BUTTON en HTML

Si lo que quieres es crear botones más personalizados, entonces lo que buscas es utilizar esta etiqueta que, si bien tiene muchas ventajas, también tiene inconvenientes. Pero en general, puede servirte para un uso básico y original.

La etiqueta button, como es habitual en código HTML, tiene una apertura y un cierre. Es decir, su apertura sería <BUTTON> mientras que el cierre sería </BUTTON>. Entre ellas es donde se introduce toda la información de ese botón. La ventaja de este frente al otro que hemos visto es que este botón te permite no solo poner un enlace, sino mucho más, como imágenes, negritas, saltos de línea… en definitiva, todo lo que necesites.

Atributos de la etiqueta BUTTON

¿Qué atributos podríamos ponerle al botón? Pues en concreto:

• Name: es el nombre que podemos darle al botón. De esta forma se identifican los botones, sobre todo cuando tienes varios.
• Type: clasifica el botón que hagas. En realidad, puedes crear muchos tipos de botones, desde uno normal a un botón para resetear un formulario, para enviar datos, etc.
• Value: relacionado con lo anterior, sirve para especificar el valor de ese botón.
• Disabled: si lo marcas, harás que el botón se deshabilite, por lo que no va a funcionar.

Cómo crear un botón HTML online

Si no quieres quebrarte mucho la cabeza a la hora de crear un botón HTML y prefieres buscar ayuda a través de webs en Internet que te hagan el botón por ti, o al menos que te permitan obtener el código para copiarlo en tu blog, web o en el sitio donde quieras, hay opciones. Y es que existen varias webs que te van a ayudar a ello, bien obteniendo un botón más básico o uno más sencillo.

Entre ellas te recomendamos:

King Button Maker

Es bastante avanzada, sobre todo porque te deja cambiar prácticamente todos los botones del botón. Además, te proporciona una preview para que vas cómo va quedando y puedas personalizar todo en base al lugar donde vayas a insertar el botón.

Al final, al darle al botón Grab the code, te aparecerá el código HTML y también el CSS. Acuérdate de adjuntar los dos porque te ayudará a que mantenga el diseño que le hayas pedido.

Da button factory

Esta es una de las mejores webs para crear botones HTML, sobre todo si el objetivo que quieres darle es una «llamada a la acción». Para ello, puedes personalizar el fondo del botón, el estilo, fuente, sombreado, tamaño y otras partes del mismo.

Después te deja descargar el botón como imagen PNG, pero también puedes incrustarlo en tu web.

Call to Action button generator

Aquí solo te da dos opciones, bien descargarlo tipo PNG o bien con el CSS. Tiene la ventaja de que puedes personalizar el color de fondo, el texto del botón con su fuente y color, así como el borde, tamaño y colores de otros detalles.

Buttons

Esta herramienta es una de las más completas que puedes utilizar. La puedes usar gratis y obtendrás diseños de calidad, además de modernos.

Button Maker

Esta herramienta también es de las que más te va a permitir personalizar los botones, sobre todo la zona de los bordes, sombras, si el texto va centrado, justificado, etc.

ImageFu

Si lo que buscas es crear botones con varias líneas de texto, esta herramienta es una de las mejores. No solo tiene muchas formas de personalizar el botón, sino que también podrás hacer botones más grandes o estilosos.

Generador de botones gráficos efecto Hover

Esta herramienta te permite crear botones que, al pasar el puntero sobre ellos, cambie. Además, te permite tener el código HTML para poder usarlo, aunque has de subir el botón final del resultado para que quede tal cual veas en la previa.

A la hora de hacer un botón HTML la mejor recomendación que podemos darte es que pruebes varias opciones ya que, de esta manera, vas a lograr el resultado que esperas. No te quedes solo con lo primero que te muestres, a veces innovar o dedicar más tiempo te ayudará a que quede mucho mejor. ¿Has hecho un botón de estos alguna vez?