Aprende como crear botones para web y aplicaciones de forma fácil y rápida. Con estos tips podrás conseguir un resultado profesional en cuestión de minutos.
Los botones son un elemento importante de la interfaz de cualquier web o aplicación. Te enseñamos cómo diseñar y programar botones para que sean funcionales y atractivos.
1. ¿Qué es un botón y para qué sirve?
Un botón es un elemento de interfaz de usuario que, cuando se hace clic, puede provocar una acción u otra. Los botones sirven para llevar a cabo una acción o para navegar a otra parte de la aplicación o del sitio web. Los botones pueden servir para muchas cosas, desde navegar por un sitio web o aplicación, hasta realizar acciones como enviar un mensaje o comprar un producto, e incluso, con el codigo javascript, exportar un formulario a pdf.
En el diseño web, y en las aplicaciones, los botones suelen tener un estilo diferente al del resto del contenido y suelen estar en lugares destacados para que sean fáciles de encontrar. Tambien, los botones pueden estar creados en variedad de formas, y aunque cada forma ejeecuten una misma funcion, cada una puede ser utilizada para ejecutar acciones muy personalizadas.
2. ¿Cómo puedo crear mis propios botones para web y aplicaciones?
Existen diferentes maneras de crear botones para web y aplicaciones. Para web, tenemos varias opciones que podemos utilizar.
. La etiqueta <a></a> como boton
La forma mas sencilla, es utilizar un link usando la etiqueta <a></a>, con un atributo de vinculo (href=»…») que conecta el botón con el objetivo al que queremos navegar. Esta etiqueta define un hypervinculo, al cual, se le pueden agregar varios atributos con los que nos permite tener varias acciones e interacciones.
Usando el atributo href=»…» podremos navegar hacia otras paginas dentro o fuera de nuestra web. Esta navegacion puede ser «Absoluta«, la cual utiliza una direccion web completa, o utilizar una direccion «Relativa«, la que te permitira navegar dentro de tu propio sitio web, sin la necesidad de utilizar la parte «https://«. Ejemplo abajo:
<!-- simple navegacion Absoluta -->
<a href="https://thedigitalmike.com">Mi Pagina Web</a>
<!-- simple navegacion Relativa -->
<a href="thedigitalmike.html">Mi Pagina Web</a>Otras opciones de la etiqueta «href«, es la de poder utilizarla para otras actividades como, para abrir tu gestor de correo electronico utilizando «mailto«, y cuando abres la pagina desde un telefono, puedes usar la opcion «tel» la cual representa un numero de telefono al que puedes llamar. Ademas, si deseas anular la accion estandar de esta etiqueta, puedes usar «javascript:void(0);«, o solo poner el signo «#» en «href» y agregar el atributo «onclick» con la opcion «return false;«. Ejemplos de esto aqui abajo:
<!-- para mandar un correo -->
<a href="mailto:tucorreo@emailcom">Enviame un correo</a>
<!-- Lamando a un numero -->
<a href="tel:123456789">Habla con un Representante</a>
...............................................
<!-- Anulando un vinculo -->
<a href="javascript:void(0);">Ejemplo</a>
<!-- Anulando un vinculo -->
<a href="#" onclick="return false;">Ejemplo</a>Esta, sin lugar a duda, es la etiqueta mas usada y versatil que podemos usar. Con acciones como menu de navegacion tanto interna como dentro del sitio web, asi como para navegar a sitios externos. Tambien pueden utilizarce, usando codigo javascript, para ejecutar funciones particulares dentro del sitio.
. La etiqueta <button></button>
Esta etiqueta <button></button> ya viene con diseño predefinido pero para poder hacerlo funcional, deberemos agregar un id=»» para poderlo identificar usando JavaScript y agregarle una funcion de accion, y tambien podremos modificar su estilo llamando al id=»» o como mejor se haría, podemos incluir una etiqueta de estilo (style=»» o class=»») para poder modificar la presentación del botón. Ejemplo:
<!-- Boton opcion #1 -->
<button id="btnStart" style="btnst">Presioname</button>Para hacer ejecutable el boton usamos estas opciones:
<!-- javascript -->
var btnStart = document.getElementById("btnStart");
btnStart.onclick = function(){
};
btnStart.addEventListener("click", function(){
});Esto tambien lo podemos hacer directamente en la etiqueta de boton, siempre que la accion sea simple y corta:
<!-- usando el atributo onclick para navegar a otra pagina -->
<button onclick="document.location='newpage.html'">Informate Aqui</button>Como extra, si deseamos utilizar el boton para navegar dentro de la misma pagina, podemos llamar en onclick al id del contenido al que queremos navegar, para luego crearle un movimiento suave o rapido del movimiento hacia el contenido. Ejemplo de navegacion local con animacion suave (este mismo codigo puede ser utilizado tanto en vinculos, como en botones, asi como en cualquier etiqueta que deseen hacrerla interactiva).
<!-- opcion #1 -->
<button onclick="document.getElementById('contactanos').scrollIntoView({behavior: 'smooth'});">Contactanos</button>
.....................................................
<!-- opcion #2 mejor para usarlo en multiples vinculos -->
<button onclick="localnav('contactanos')">Contactanos</button>
function localnav(id){
document.getElementById(id).scrollIntoView({behavior: 'smooth'});
}. Opciones de botones menos usadas
En general, podemos utilizar basicamente cualquier etiqueta html como boton, siempre y cuando agreguemos una accion dinamica usando javascript y agregandole el role=»button» a la etiqueta. En este caso la clase determina el aspecto del boton como siempre. El id permite agregarle la funcionalidad mediante codigo javascript. Y el atributo role permitira el navegador y a los sistemas de asistencia para personas con problemas especiales, definir la etiqueta como boton. Otra dos etiquetas para mejorar nuestro boton para hacerlo compliance con ADA, es usar la etiqueta title (cuando usamos imagenes principalmente o botones sin texto) y aria-label para asistencia a personas con problemas visuales.
<span role="button" class="btnst" id="btnID">Boton</span>3. En Resumen
En resumen, hoy pudimos ver como crear y usar un vinculo y/o un boton con la intencion de navegar tanto dentro como fuera de nuestro sitio, asi como una breve presentacion sobre como crearlos y hacerlos funcionar.