18 May Cómo diseñar botones web: UX, accesibilidad, ejemplos y CSS

Los botones web parecen un elemento pequeño, pero concentran algunas de las decisiones más importantes de una interfaz: jerarquía visual, accesibilidad, microcopy, interacción, confianza y conversión. Un botón no solo debe verse bien. Debe dejar claro qué acción ejecuta, distinguirse del resto de la interfaz, funcionar con teclado y touch, mantener estados reconocibles y ofrecer feedback cuando el usuario interactúa.

En esta guía voy a explicar cómo diseñar mejores botones web con criterios de UX, accesibilidad y conversión, pero también con ejemplos visuales y código que puedas reutilizar como referencia. Veremos tamaños, contraste, estados, texto, iconos, mobile, botones destructivos, jerarquía de CTA, errores frecuentes y patrones prácticos en HTML y CSS.

Por qué el diseño de botones web importa tanto

Los botones son puntos de decisión. En una landing pueden llevar a solicitar presupuesto; en un ecommerce, añadir al carrito; en una aplicación, guardar cambios; en un formulario, enviar datos. Si el botón es ambiguo, difícil de encontrar o visualmente débil, la interfaz obliga al usuario a pensar más de la cuenta.

Por eso el diseño de botones no debería reducirse a color y forma. La calidad real depende de cómo se integra el botón dentro de un sistema de interfaz.

1. Define primero la acción, no el estilo

Antes de elegir color, radio, sombra o icono, define qué acción representa el botón y qué importancia tiene dentro de la pantalla.

Una interfaz suele necesitar varios niveles:

• Botón primario: representa la acción principal.
• Botón secundario: ofrece una alternativa importante, pero no dominante.
• Botón terciario o de texto: sirve para acciones de menor prioridad.
• Botón destructivo: elimina, cancela o ejecuta una acción con riesgo.

Si todos los botones parecen primarios, ninguno lo es. La jerarquía visual debe ayudar al usuario a entender qué camino propones sin impedir alternativas.

2. Usa una jerarquía visual clara

El botón principal debería destacar por una combinación controlada de color, relleno, tamaño y posición. El secundario puede utilizar contorno o menor contraste visual, siempre que siga siendo reconocible como control interactivo.

Evitaría crear demasiadas variantes. En la mayoría de sitios, un sistema con primario, secundario, terciario y destructivo es suficiente.

3. Diseña un tamaño cómodo de pulsar

El tamaño del objetivo táctil es uno de los puntos más importantes en accesibilidad y uso móvil. WCAG 2.2 incorpora un criterio específico de tamaño mínimo para objetivos interactivos. Como referencia práctica de diseño, una altura visual cercana a 44–48 px suele funcionar bien en interfaces táctiles, aunque el criterio de accesibilidad también depende del área interactiva y del espacio alrededor.

El ancho no necesita ser fijo. Un botón debe adaptarse a su texto con padding horizontal suficiente. En móvil, un botón principal puede ocupar todo el ancho disponible si eso mejora claridad y facilidad de uso.

4. No dependas solo del color

El color puede indicar prioridad o estado, pero no debería ser la única señal. Un botón activo, seleccionado o destructivo debe seguir siendo comprensible para personas con dificultades de percepción del color.

Además del color, puedes trabajar con:

• relleno;
• borde;
• peso tipográfico;
• iconos;
• posición;
• forma;
• cambio de estado claramente perceptible.

5. El contraste del texto sigue siendo prioritario

Un botón llamativo puede seguir siendo inaccesible si el texto no se lee bien. No basta con que el fondo contraste con la página: el texto dentro del botón también necesita contraste suficiente.

Evitaría combinaciones como amarillo claro con blanco, gris claro sobre blanco o tonos muy saturados con texto de poco contraste. La decisión debe basarse en legibilidad real, no solo en estética.

6. Escribe microcopy que describa la acción

El texto del botón debería responder a “¿qué ocurrirá si hago clic?”.

Frases como “Enviar”, “Continuar” o “Aceptar” pueden funcionar en contextos muy evidentes, pero en muchos casos conviene ser más específico.

La microcopy debe ser breve, concreta y coherente con la acción real.

7. Usa verbos de acción

Los botones funcionan mejor cuando expresan una acción. Verbos como “Ver”, “Guardar”, “Comprar”, “Descargar”, “Comparar”, “Reservar” o “Crear” indican al usuario qué va a suceder.

Evitaría textos excesivamente publicitarios si la acción no los justifica. Un CTA puede ser persuasivo sin ser ambiguo.

8. Define todos los estados del botón

Un botón profesional no tiene un único estado. Como mínimo, debería contemplar:

• Default: estado normal.
• Hover: respuesta al pasar el cursor.
• Focus: indicador para navegación por teclado.
• Active/pressed: respuesta durante la pulsación.
• Disabled: acción no disponible.
• Loading: proceso en curso.
• Success/error: feedback cuando la acción lo necesita.

Muchos diseños se quedan en default + hover. Eso es insuficiente para aplicaciones, ecommerce o formularios complejos.

9. El foco de teclado debe verse

Una persona que navega con teclado debe saber qué elemento tiene el foco. El indicador no debería desaparecer por motivos estéticos.

Un buen patrón es utilizar un contorno claro, suficientemente contrastado y consistente en toda la interfaz.

10. Distingue botón y enlace

Un botón ejecuta una acción. Un enlace normalmente lleva a otro recurso o URL. Visualmente pueden parecer similares, pero semánticamente no deberían intercambiarse sin motivo.

• Guardar cambios → botón.
• Ver documentación → enlace.
• Abrir modal → botón.
• Ir a contacto → enlace.

Utilizar elementos HTML adecuados mejora accesibilidad, teclado, comportamiento esperado y mantenimiento.

11. No abuses de los iconos

Un icono puede acelerar reconocimiento cuando es universal: papelera, play, cerrar, buscar. Pero no todos los símbolos son obvios.

Si el significado no es inmediato, acompáñalo de texto. En botones solo con icono, asegúrate de proporcionar un nombre accesible.

12. Mantén consistencia en toda la web

Si dos botones hacen lo mismo, deberían parecerse. Si dos acciones tienen distinta prioridad, deberían diferenciarse de forma consistente.

La consistencia reduce carga cognitiva porque el usuario aprende el sistema una vez y puede reutilizar esa lógica en todo el sitio. Definir un pequeño sistema de diseño evita crear un botón distinto en cada página.

13. Piensa en móvil desde el principio

En móvil cambian tres cosas: espacio, precisión táctil y contexto. Un botón que funciona bien con ratón puede ser difícil de pulsar con el pulgar.

En pantallas pequeñas revisaría:

• altura suficiente;
• separación entre controles;
• texto que no se corte;
• posición accesible con una mano;
• botones primarios a ancho completo cuando ayude;
• estados que no dependan del hover.

El hover no existe como señal principal en touch, así que la interfaz no debería depender de él para explicar una función.

14. No coloques dos CTAs primarios compitiendo

Uno de los errores más comunes en landing pages es destacar dos o tres acciones con el mismo peso. El usuario termina sin saber cuál es la principal.

Si hay dos opciones relevantes, jerarquízalas:

• primario: “Solicitar presupuesto”;
• secundario: “Ver trabajos”.

La jerarquía debe reflejar el objetivo de negocio sin bloquear alternativas razonables.

15. La posición del botón depende del contexto

No existe una única ubicación correcta. La posición debe responder al momento de decisión.

En una ficha de producto, el CTA debe estar cerca de precio, variantes y disponibilidad. En una landing, puede repetirse después de bloques clave si el contenido es largo. En un formulario, el botón debe aparecer donde termina la tarea.

La regla útil es colocar la acción cuando el usuario tiene la información suficiente para decidir.

16. Trabaja bien los botones destructivos

Eliminar cuenta, borrar proyecto o cancelar una compra requiere un tratamiento distinto.

Un botón destructivo debería:

• ser claramente reconocible;
• explicar la acción;
• evitar activaciones accidentales;
• pedir confirmación cuando el daño sea difícil de revertir;
• ofrecer recuperación si es posible.

Evitaría textos vagos como “Aceptar” dentro de un modal destructivo. “Eliminar proyecto” comunica mucho mejor el resultado.

17. El estado disabled no debe sustituir una explicación

Desactivar un botón sin explicar por qué puede frustrar al usuario. Si una acción no está disponible, intenta comunicar qué requisito falta.

Por ejemplo, en lugar de un botón gris sin contexto, puedes indicar “Selecciona una talla para continuar”.

18. Diseña bien el estado de carga

Cuando una acción tarda, el botón debe comunicar que el sistema está trabajando. Un spinner, cambio de texto o bloqueo temporal puede evitar clics repetidos.

• antes: “Realizar pedido”;
• durante: “Procesando…”;
• después: confirmación clara.

En procesos críticos, no conviene cambiar de estado de forma que el usuario pierda contexto.

19. Diseña para accesibilidad sin perder identidad visual

Accesibilidad y diseño no son opuestos. Un botón puede ser muy reconocible, coherente con la marca y cumplir criterios de contraste, foco y tamaño.

De hecho, muchas decisiones accesibles mejoran la interfaz para todo el mundo: targets más cómodos, texto más claro, estados visibles y jerarquía consistente.

20. Botones y conversión: qué deberías probar

Un botón no convierte de forma aislada. La oferta, el contenido, el precio, la confianza y el contexto suelen tener más peso. Pero sí puedes mejorar fricción alrededor del CTA.

Variables que merece la pena probar:

• texto;
• jerarquía;
• posición;
• tamaño;
• contraste;
• cantidad de CTAs;
• contexto previo;
• feedback tras la interacción.

No haría tests A/B solo para probar colores sin una hipótesis. “Rojo vs verde” rara vez es una pregunta útil por sí sola. “¿Un CTA más específico reduce dudas y aumenta el clic?” sí lo es.

Qué métricas mirar en un botón CTA

Según el contexto, mediría:

• CTR del CTA;
• tasa de conversión posterior;
• abandono del formulario;
• errores;
• clics repetidos;
• tiempo hasta completar la acción;
• uso por dispositivo.

El CTR aislado puede engañar. Un botón puede recibir más clics y generar menos conversiones si promete algo que después no cumple.

Ejemplos visuales de botones web bien diseñados

Una forma muy práctica de entender cómo diseñar mejores botones web es ver ejemplos de jerarquía, contraste, microcopy y estados. Los siguientes ejemplos no pretenden ser una librería completa, sino una referencia visual para distinguir qué decisiones suelen funcionar mejor en una interfaz.

Ejemplo de jerarquía correcta entre CTAs

Cuando una interfaz tiene varias acciones, el usuario debe entender rápidamente cuál es la principal.

En este caso, “Solicitar presupuesto” actúa como CTA principal, mientras que “Ver proyectos” ofrece una alternativa lógica sin competir visualmente en exceso.

Ejemplo de botón mal resuelto vs botón mejorado

Qué tienen en común los mejores botones web

Los mejores botones web suelen compartir varios rasgos: una acción clara, contraste suficiente, jerarquía visual bien resuelta, tamaño cómodo para móvil, estados visibles y una microcopy que no deja dudas sobre lo que ocurrirá al hacer clic. No necesitan ser extravagantes; necesitan ser comprensibles, accesibles y coherentes con el resto de la interfaz.

Ejemplos de botones HTML y CSS

Además de entender el diseño, puede ser útil ver cómo se traduce a código. Estos ejemplos son deliberadamente sencillos para que puedas adaptarlos a cualquier sistema de diseño.

Botón primario accesible

<button class="btn btn-primary" type="button">
  Solicitar presupuesto
</button>

.btn {
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.btn-primary {
  background: #111827;
  color: #ffffff;
}

.btn-primary:hover {
  background: #1f2937;
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-primary:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 3px;
}

Lo importante aquí no es el color concreto, sino el sistema: tamaño cómodo, contraste, estado hover, respuesta al pulsar y foco visible.

Botón secundario

<button class="btn btn-secondary" type="button">
  Ver proyectos
</button>

.btn-secondary {
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
  background: #f8fafc;
}

Este patrón funciona bien cuando quieres mantener una segunda acción visible sin darle el mismo peso que al CTA principal.

Botón con icono

<button class="btn btn-download" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
  <span>Descargar guía</span>
</button>

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-download svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

El icono es decorativo porque el texto ya explica la acción. Por eso puede llevar aria-hidden="true".

Botón disabled con explicación

<p id="help-talla">Selecciona una talla para continuar.</p>

<button
  class="btn btn-primary"
  type="button"
  disabled
  aria-describedby="help-talla">
  Continuar al pago
</button>

El punto importante es que el usuario no tenga que adivinar por qué el botón está desactivado.

Botón en estado de carga

<button class="btn btn-primary" type="button" aria-busy="true">
  Procesando…
</button>

Si la acción tarda, conviene comunicar el estado y evitar clics repetidos. En implementaciones reales, el cambio debería gestionarse con lógica de aplicación y restaurarse si la operación falla.

Ejemplos de buenos textos para botones

Errores frecuentes al diseñar botones web

Usar demasiados estilos

Si cada página introduce un botón diferente, la interfaz pierde coherencia.

Eliminar el foco

Quitar el outline sin sustituirlo por un indicador equivalente perjudica la navegación por teclado.

Botones demasiado pequeños

Son difíciles de activar en móvil y aumentan errores de interacción.

Texto ambiguo

“Aceptar”, “Enviar” o “Seguir” pueden ser demasiado genéricos si el contexto no es evidente.

Depender del hover

En móvil no existe como interacción principal.

Contraste insuficiente

Un botón puede ser visualmente atractivo y seguir siendo difícil de leer o identificar.

Dos acciones primarias a la vez

Genera competencia visual y aumenta indecisión.

No mostrar feedback

Si el usuario pulsa y nada cambia, puede repetir la acción o pensar que ha fallado.

Checklist para diseñar botones web

• ¿La acción principal está clara?
• ¿El botón se reconoce como interactivo?
• ¿El texto explica qué ocurrirá?
• ¿El tamaño es cómodo en móvil?
• ¿Hay espacio suficiente alrededor?
• ¿El contraste es adecuado?
• ¿Se ve el foco de teclado?
• ¿Existen hover, active y loading?
• ¿El botón disabled explica el motivo?
• ¿Los iconos tienen significado claro?
• ¿La jerarquía es consistente?
• ¿El diseño funciona sin depender de hover?

Preguntas frecuentes sobre botones web

¿Qué tamaño debe tener un botón web?

No existe una medida universal. Como referencia práctica, una altura cercana a 44–48 px suele ser cómoda en interfaces táctiles, pero también debes considerar el área interactiva y el espacio entre controles.

¿Qué color debe tener un botón CTA?

No existe un color que convierta siempre mejor. El botón debe destacar dentro del sistema visual, mantener contraste suficiente y ser coherente con la identidad de la marca.

¿Qué texto funciona mejor en un botón?

Texto breve y específico que describa la acción: “Solicitar presupuesto”, “Añadir al carrito” o “Descargar guía” suelen ser más claros que etiquetas genéricas.

¿Es mejor un botón con icono o solo texto?

Depende. Los iconos ayudan cuando su significado es universal. Si puede haber ambigüedad, es mejor acompañarlos con texto.

¿Debo usar botones redondeados?

El radio de borde es una decisión de sistema visual. Lo importante es mantener consistencia y que el elemento siga siendo reconocible como control interactivo.

¿Cuántos botones primarios puede haber en una pantalla?

Normalmente conviene que exista una acción claramente dominante. Puede haber más de un CTA, pero deberían estar jerarquizados para evitar competencia visual.

¿Cómo hago accesible un botón?

Usa semántica HTML correcta, texto o nombre accesible claro, contraste suficiente, un tamaño cómodo, foco visible y compatibilidad con teclado.

¿Los botones afectan a la conversión?

Sí pueden influir, especialmente si reducen fricción, mejoran claridad y ayudan a priorizar la acción. Pero deben evaluarse dentro del contexto completo de la página.

Diseñar botones web es diseñar decisiones

Un buen botón no necesita llamar la atención de forma agresiva. Necesita aparecer en el momento adecuado, comunicar con claridad qué hace y responder bien cuando el usuario interactúa.

Si trabajas jerarquía, tamaño, contraste, microcopy, estados, accesibilidad y código como un sistema, los botones dejan de ser un detalle decorativo y se convierten en una parte sólida de la experiencia de usuario.

Ese es el objetivo: que la persona no tenga que preguntarse dónde hacer clic, qué ocurrirá después o si la interfaz ha respondido.

Escrito por Jurgen B

Profesor en Aula CM de Diseño Web con WordPress, Diseño Gráfico, Community Manager, IA, SEO y ecommerce. Moderador de la mesa de ecommerce en Reunión de Agencias (2024–2026) y ponente en ProMarketing Day.

Sobre mí · LinkedIn