Diseño de botones web
Actualizado: 29 / 01 / 2022

9 consejos para el diseño de botones web

experto SEO Barcelona
Gerard Osan
Experto SEO
SectorHablamos de

Un botón debe parecer un botón

Los botones son uno de los elementos más comunes en el diseño web. Se han convertido en un recurso prácticamente presente en todo tipo de portales. Desde sencillas webs corporativas que nos incitan a contactar con su negocio, hasta tiendas online que los usan durante el proceso de compra de sus productos.

Desde su uso en las primeras páginas web, el diseño de los botones ha ido evolucionando con el tiempo para modernizarse y adaptarse a las corrientes visuales de cada año. Pese a ello, existen una serie de convenciones que deben respetarse y aplicarse para que estos elementos del diseño cumplan con su función.

En definitiva, la función de un botón dentro de una web es muy simple: ser clicado por un usuario para realizar una acción. Y para conseguir que cumplan este cometido, os traemos una serie de consejos sobre el diseño de botones web:

1. Los botones deben parecer botones

Aunque parezca muy obvio, cuando añadimos un botón a una web, este debe parecer un botón. Es muy fácil que durante el ejercicio creativo del diseño del sitio web, este recurso evolucione hasta convertirse en algo poco identificable como tal.

Como norma general, cualquier usuario que acceda a nuestra web debe poder identificar un botón como elemento susceptible de ser clicado. ¿Cómo lo conseguimos? Siguiendo una serie de convenciones visuales habituales para los botones que incluyen el color, la forma o el tamaño.

2. Ten en cuenta el diseño para móviles

El auge y consolidación del uso de Internet en smartphones hace imperativo que el diseño de una web se realice teniendo en cuenta las características de uso de dichos dispositivos. Evidentemente, esto incluye los botones.

Por ejemplo, un recurso tan extendido en ordenadores como el hover es prácticamente invisible en smartphones.

3. Ubicación dentro de la página

La ubicación de los botones dentro de una página debe ser coherente. Debemos respetar el flujo de lectura y navegación de los usuarios, y conducirlos hacia los botones. Un ejemplo muy obvio: el botón de envío de un formulario nunca estará ubicado al inicio del mismo, dado que el flujo de uso natural de un usuario será rellenar los campos del formulario y finalizar con su envío.

Otro punto a tener en cuenta vinculado con la ubicación de los botones en una web es el orden. Ante la presencia de varios de estos recursos, deberemos utilizar una ordenación lógica e intuitiva. Es decir, es importante que se establezca una jerarquía de botones en la página.

Por ejemplo, durante el proceso de compra de un e-commerce, el botón para continuar al siguiente paso del proceso estará ubicado a la derecha, y aquel destinado a retroceder un paso o cancelar la operación a la izquierda.

A la hora de diseñar botones, es importante que tengamos en cuenta:
  • Principio de Alineación: los elementos deben estar situados siguiendo un sentido lógico en la página, no podemos colocar los elementos al azar y desordenados.Al observar los botones, debemos poder establecer una alineación visual.
  • Principio de proximidad: Cuando hablamos de la cercanía entre los diferentes elementos, ya sean texto o botones, debemos tener en cuenta el principio de proximidad. Es decir, contra más cercanos sean los elementos, mayor será la relación que tengan entre ellos.
Los espacios en blanco, también son importantes para poder evitar un exceso de información o elementos.

4. Deja clara su acción

Antes de hacer clic en un botón, el usuario debe tener claro qué acción se realizará a continuación. La incertidumbre provocada por desconocer la finalidad de un botón puede conllevar que muchos usuarios simplemente no hagan clic en el mismo. Como veremos más adelante, podemos utilizar recursos como el texto o la iconografía para indicar a los navegantes cuál será el resultado de hacer clic en el botón.

Por otro lado, es importante que el usuario también reciba una respuesta a medida que va navegando, ya sea a modo de mensaje o notificación. Estos mensajes, ayudan al usuario a navegar de una forma más cómoda por la página web, sobre todo en el caso de las pasarelas de pago o compra.

5. Escoge bien el color

El color de un botón en una página web tendrá cierta influencia en la percepción de los usuarios del mismo. Cada proyecto web es diferente, pero en líneas generales podemos definir los siguientes puntos clave a la hora de escoger el color de los botones de una web:

  • Contraste: el color debe resaltar sobre los elementos colindantes.
  • Legibilidad: el tono elegido tiene que permitir que el texto del botón sea fácilmente legible.
  • Convenciones habituales: existen preconcepciones sobre algunos colores que, en algunos casos, nos llevarán a evitar su uso. Por ejemplo, el verde para acciones positivas.

6. Se coherente en toda la web

El diseño de los botones a través de todo un portal web debe seguir el mismo estilo y líneas visuales. De este modo, los usuarios aprenderán de forma intuitiva qué es un botón y qué no en nuestra web, y qué acción pueden realizar al hacer clic en ellos.

En este punto se incluyen aspectos del diseño de los botones, como la forma, tipografía, el color, su ubicación o su tamaño.

Podemos acompañar de iconos que nos ayuden a comprender la acción que realizaremos, como es el caso de poner una cruz cuando sea un botón para cerrar una pestaña.

7. Utiliza los textos del botón y los colindantes

El texto del botón debe dejar muy clara la acción que se va a realizar mediante el clic del mismo. También podemos utilizar textos complementarios al botón para explicar a los usuarios su funcionamiento, o incluso como recurso persuasivo.

8. Emplea el tamaño adecuado

De nada nos sirve añadir un botón en una web si el usuario no lo ve por ser demasiado pequeño. O en el caso de los Smartphone, si no es capaz de hacer clic en el mismo. La elección del tamaño de los botones debe seguir un criterio de usabilidad y también de priorización visual.

El tamaño del botón debe estar correctamente adaptado para cada uno de los dispositivos, ya que si es demasiado pequeño, dificultará su clicado.

9. Añade interacción a los botones

En el caso de los ordenadores, podemos aplicar cambios de estilo en los botones cuando los usuario pasan el ratón por encima, incluso cambiar el icono del cursor.

También es recomendable aplicar un recurso de interacción que sirva para indicar al usuario que el botón ha sido clicado. De este modo, evitaremos que el usuario desconozca si realmente ha hecho clic en un botón.


Aunque sigamos estos consejos sobre el diseño de los botones de una web, deberemos tener en cuenta las características de cada proyecto a la hora de definir su aspecto. Si necesitáis ayuda con éste o cualquier otro elemento del diseño web, no dudéis en contactar con nosotros.


experto SEO Barcelona
Sobre el autor/a
Gerard Osan — Experto SEO
Dentro del marketing online he enfocado mi carrera profesional hacia el SEO técnico y la analítica web. También dedico algo de tiempo a la programación, buscando que el desarrollo web aporte recursos optimizados al marketing.

Noticias relacionadas

Diseño web en Barcelona
Servicio relacionado

Diseño web

¿Necesitas una nueva web? ¿O renovar tu página web actual? Te ofrecemos un sitio web con diseño a medida, con la última tecnología y optimizada para el SEO.
Consigue el mejor diseño para tu web

¿Tienes un proyecto en mente? Cuéntanoslo

Utilizamos cookies propias y de terceros para ofrecerte un mejor servicio. Más información sobre las cookies

Aceptar