norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Códigos » Botones en HTML5

Como crear y usar botones en las páginas con HTML5


Actualizado: 04 de marzo del 2023
Por: Norfi Carrodeguas
Agregar botones de varias formas, colores y tamaños a las páginas de un sitio y usarlos para distintas acciones con JavaScript. Como hacer botones de compartir y seguir en redes sociales o para otros usos. Ejemplos y códigos.
Como crear y usar botones en las páginas con HTML5

En las páginas de internet los botones son elementos que incitan y llaman a la acción.
A diferencia de los enlaces y otros elementos, los botones son ideales para muchas acciones como compartir en redes sociales, incitar a seguirnos en nuestras cuentas, abrir otras páginas, abrir cuadros de información, etc.
Una de sus ventajas es prescindir de tener que usar imágenes, archivos externos que siempre retrasan la carga de las páginas.
En este artículo compartimos con los lectores como crearlos en una gran variada de formas y estilos y de forma sencilla y como usarlos para cualquier acción.


Crear un botón en HTML5


En HTML5 podemos usar el elemento "button" para crear un botón de forma sencilla de la siguiente forma:
<button>Nombre botón</button>
El resultado es el siguiente:

El texto que insertamos entre las etiquetas de inicio y cierre se muestra encima del botón y su ancho de adapta al mismo, a no ser que se defina con CSS.
También se puede usar en vez de texto una imagen, pero ese no es el objetivo de este artículo.
Esta insípida muestra podemos transformarla en algo más estético atractivo y usable, mediante CSS.


Como cambiar el estilo de los botones con CSS


Con CSS podemos fácilmente cambiar la forma, el tamaño y el color de los botones, para hacerlos más atractivos.
Solo necesitamos asignarle una clase y agregar unas reglas en una hoja de estilo CSS, para cambiar su forma.
Por ejemplo:
<style>
.bt1{padding:6px;}
.bt2{padding:6px;border-radius:10px;}
.bt3{padding:6px;border-radius:50%;}
</style>

<button class="bt1">Botón 1</button>
<button class="bt2">Botón 2</button>
<button class="bt3">Botón 3</button>
El resultado es el siguiente:

También podemos lógicamente especificar distintos valores, como el color, ancho del elemento, tamaño y espaciado del texto y otros, lo que nos permite usar en una misma página botones con un estilo diferente.
Algunos ejemplos se pueden ver a continuación.

Agregamos a los botones anteriores las siguientes reglas para cambiar su estilo:
<style>
.btr{background-color:red;color:white;}
.btx{background-color:white;border:2px solid red;color:red;}
.btb{background-color:blue;color:white;width:120px;}
.btg{background-color:green;color:white;font-size:1.2em;padding:12px;}
</style>

<button class="bt1 btr">Botón 1</button>
<button class="bt1 btx">Botón 2</button>
<button class="bt2 btb">Botón 3</button>
<button class="bt3 btg">Botón 4</button>
Otros efectos adicionales se consiguen con el evento "hover", que permite cambiar el color de fondo al situar el cursor del ratón encima, como se puede comprobar en otros botones más abajo.
Además podemos especificar otro tipo de cursor, efectos de transición, sombras, opacidad, etc.


Como usar los estilos CSS


Las hojas de estilo CSS se pueden agregar inline en el área del HEAD de la página o cargarlas desde archivos externos.
Se recomienda el primer método en páginas aisladas (como lo hacemos en este caso) y el segundo para aplicarlo en varias de ellas al mismo tiempo.

Como asignar una acción a un botón


A un botón al igual que a cualquier otro elemento en HTML5, podemos asignarle una acción usando un evento y JavaScript.
No es difícil.
Un evento es un desencadenador, el más conocido de ellos es "onclick", que usaremos en los ejemplos.
Se acciona al dar clic con el mouse en el boton o presionarlo en una pantalla táctil.
Para usarlo solo debemos agregar el atributo "onclick" al botón creado y con JavaScript hacer que nos realice una acción.
<button class="bt3 btg" onclick="javascript:alert('Contenido del mensaje');">Mensaje</button>
En este ejemplo al dar clic en el botón se abrirá un cuadro de alerta con un mensaje.
¡Pruébalo!



Acciones que permite JavaScript


De forma algo similar al ejemplo anterior, podemos usar a JavaScript para realizar gran cantidad de acciones, al dar clic en los botones.
Por ejemplo: compartir en redes sociales, abrir una página en otra pestaña del navegador, abrir una página en una ventana emergente, etc.
A continuación mostramos ejemplos de cada uno de estos casos, comenzando por los más sencillos.

Botón para abrir una página en una nueva pestaña

Para crear un botón que permita abrir una dirección de internet en una nueva pestaña del navegador, utiliza el siguiente código.
<button type="button" onclick="javascript:void(window.open('https://pinterest.com/norfipc/'));" title="Síguenos en Pinterest">Pinterest</button>
El resultado es el siguiente, en este ejemplo lo usamos para animar a los lectores a seguirnos en nuestro perfil de Pinterest.

También es posible crear un botón para abrir una ventana emergente, aunque no lo recomendamos para dispositivos móviles.
Usa el siguiente código y comprueba su efecto en el botón más abajo.
<button type="button" onclick="javascript:void(window.open('https://pinterest.com/norfipc/','','width=300,height=200,left=50,top=50,toolbar=yes'));" title="Síguenos en Pinterest">Pinterest</button>



Botones para compartir en redes sociales de internet

Todas las redes sociales ofrecen direcciones URL específicas para compartir cualquier página de internet.
En otro artículo se pueden conocer cuáles son las necesarias para los principales sitios sociales o incluso usar un generador para obtener el código HTML.
Para crear un botón que permita compartir la página actual en Facebook, usa el siguiente código.
<button type="button" onclick="javascript:void(window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location)));">Me Gusta</button>
El resultado es el siguiente.

De forma similar se pueden crear otros botones para compartir en otros sitios sociales, asignándoles el color oficial que representa a cada uno de estos sitios.
En este ejemplo usamos los colores oficiales de Google Plus, Facebook, Twitter y Linkedin, para crear botones que permiten compartir cualquier página en estas redes.
Además uno para compartir la dirección del feed RSS de nuestro sitio web.

Cada botón usa JavaScript para pasar los parámetros necesario que exige cada red social, en algunos casos solo la dirección URL de la página, en otras como Twitter el título.
Ambos parámetros son obtenidos automáticamente y funcionan en cualquier página donde se inserten.
¡Pruébalos!
El código usado en los botones anteriores y el contenido de la hoja de estilo CSS, se puede ver a continuación.
<style>
.btn{margin:10px 0 10px 0;color:#ffffff;font-weight:bold;display:inline-block;padding:6px 12px;font-size:16px;text-align:center;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;outline: 0;}
.fb{background-color:#3b5998;}
.fb:hover{background-color:#6b93e7;}
.gp{background-color:#dd4b39;}
.gp:hover{background-color:#f87362;}
.tw{background-color:#55acee;}
.tw:hover{background-color:#97d1fc;}
.li{background-color:#007bb5;}
.li:hover{background-color:#5daed4;}
.rss{background-color:#ff6600;}
.rss:hover{background-color:#fc9c5c;}
.pint{background-color:#2bb24c;}
.pint:hover{background-color:#50eb76;}
</style>

<button type="button" onclick="javascript:void(window.open('https://plus.google.com/share?url='+encodeURIComponent(location)));" class="btn gp">+1</button> 
<button type="button" onclick="javascript:void(window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location)));" class="btn fb">Like</button>
<button type="button" onclick="javascript:void(window.open('https://twitter.com/intent/tweet?text='+encodeURIComponent(window.document.title)+'&amp;url='+encodeURIComponent(location)));" class="btn tw">Tweet</button>
<button type="button" onclick="javascript:void(window.open('https://www.linkedin.com/shareArticle?mini=true&amp;url='+encodeURIComponent(location)));" class="btn li">Linkedin</button>
<button type="button" onclick="javascript:void(window.open('https://norfipc.com/canales-noticias-rss-sitio-norfipc.php'));" class="btn rss">RSS</button>


Como usar los botones y JQuery


JQuery es una librería que agrega funcionalidades adicionales a JavaScript.
Podemos usar los botones para desencadenar muchos de estos efectos.
Para usar algunas de las funcionalidades de JQuery, debemos de asignarle a cada uno de los botones un identificador (ID).
Lee más información: JQuery, ejemplos prácticos para usar en páginas web

Usar los botones de Bootstrap en mi sitio


Nos inspiramos y animamos a crear esta página, con los botones de Bootstrap.
Los hermosos botones que ofrece este framework web, de distintos colores y tamaños, para las páginas creadas con su librería, también pueden ser utilizados en otros sitios.
Botones de Bootstrap
Para hacerlo solo necesitamos enlazar el archivo de estilo CSS o crear uno personalizado (custom) mucho más pequeño.
Lee más información en el siguiente artículo: https://norfipc.com/web/como-crear-paginas-sitio-web-usando-bootstrap.php

Contenedores DIV y elementos A en vez de botones


En las páginas de este sitio uso elementos que simulan ser botones, pero realmente son contenedores, a los que les doy el estilo necesario usando CSS.
La ventaja es me da posibilidad de poder usar en ellos el elemento A, es que nos permite usar el atributo HREF para enlaces, sin tener que estar obligados a emplear JavaScript para apuntar a una dirección URL.
Un ejemplo:
Código del contenedor y regla de estilo CSS.
HTML
<div class="btn"><a href="URL">Sígueme en Twitter</a></div>

CSS
.btn{margin:16px 6px 2px 0;color:#ffffff;font-weight:bold;display:inline-block;padding:6px 12px;font-size:16px;text-align:center;cursor:pointer;outline:0;float:left;background-color:#55acee;}
.btn a {color:#ffffff;text-decoration:none;}
Otros botones de ejemplo que usan solo el elemento A en vez de BUTTON y personalizando su estilo (el estilo de Windows Vista) con CSS.
Vista Negro Vista Rojo Vista Azul Vista Verde

Personalizar el estilo de botones con CSS


Código para dar diferentes estilos a un botón mediante CSS, agregando degradados o diferentes efectos dinámicos.

See the Pen Buttons with CSS by Poonam Soni (@poonam-adlakha) on CodePen.




Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí