Si lo piensas bien, los botones son el interruptor de tu negocio online. Puedes tener la web más bonita del mundo, el contenido más trabajado y la estrategia de marketing más afinada… pero si tu botón de “Comprar ahora”, “Reservar cita” o “Hablar por WhatsApp” no funciona como debería, todo lo demás se cae como un castillo de naipes.
Un botón web no es un simple cuadradito con color y texto: es un elemento de interacción crítica. Es el puente entre la curiosidad y la acción, entre el “me interesa” y el “te pago”. Diseñarlo bien es casi un arte, porque combina psicología, diseño visual, experiencia de usuario (UX), accesibilidad y hasta métricas de negocio.
Aquí vamos a desgranar de forma muy práctica cómo crear botones para páginas web que no solo se vean bonitos, sino que inviten a hacer clic. Vamos a hablar de fundamentos, de microinteracciones que marcan la diferencia, de dónde colocarlos en tu web para que conviertan más, y por supuesto, de cómo crearlos en la práctica: desde HTML y CSS puro, hasta con maquetadores visuales de WordPress como Elementor, Divi o Gutenberg.
Además, veremos cómo frameworks como Bootstrap o Tailwind facilitan la vida con patrones predefinidos, y cómo no olvidar la parte más importante de todas: la accesibilidad. Porque si tu botón no lo puede usar todo el mundo, es que tu diseño no está completo.
Fundamentos que no se negocian
Affordance y jerarquía visual: que parezca clicable y sea lo primero que ves
Un error clásico: botones que parecen texto plano, o enlaces que parecen botones. El affordance es, básicamente, que algo “grite” lo que es. Un botón debe parecer clicable sin que el usuario se lo tenga que pensar. Bordes definidos, contraste suficiente, sombras o relieves sutiles ayudan a que un visitante identifique rápido dónde interactuar.
La jerarquía visual hace el resto: tu botón principal (CTA — Call to Action) debe destacar frente al resto de elementos. Si todo en tu web brilla igual, nada brilla.
Ejemplo práctico:
Botón perdido en medio de un bloque de texto (nadie lo nota).
Botón con contraste y espacio en blanco alrededor (todo el mundo lo ve).
Texto del botón: verbos claros, beneficio y fricción cero
Un botón con “Enviar” es funcional. Pero un botón con “Quiero mi presupuesto” o “Descargar mi guía gratis” es persuasivo. El microcopy —ese pequeño texto dentro del botón— tiene un impacto brutal en la conversión.
Las tres reglas de oro:
Verbo de acción: que indique claramente qué va a pasar.
Beneficio directo: qué gana el usuario con ese clic.
Sin fricciones: evita dudas como “¿qué pasa después?”.
Botón Genérico | Botón Optimizado |
|---|---|
Enviar | Quiero mi presupuesto |
Comprar | Comprar ahora con envío gratis |
Más info | Ver cómo funciona en 2 minutos |
Color y contraste: visibilidad, marca y cumplimiento WCAG
El color no es un capricho. Está ligado a la psicología, pero sobre todo a la visibilidad. Tu botón principal debe tener un color que contraste con el fondo y a la vez encaje con tu identidad visual.
Ejemplo: si tu web es mayoritariamente azul, no pongas el botón principal azul oscuro sobre azul claro. Juega con complementarios (azul + naranja, verde + violeta) o con tonos que mantengan consistencia, pero sin perder contraste.
Además, no olvides las pautas de accesibilidad (WCAG): el contraste mínimo debe ser de 4.5:1 para texto normal. Esto asegura que personas con visión reducida también puedan identificar el botón.
Tamaño, forma y espacio: targets táctiles y escaneabilidad
Un botón no debería obligar a hacer zoom en móvil. Google recomienda 44px de alto por 44px de ancho mínimo como tamaño táctil. Y no solo importa el tamaño, sino el espacio alrededor: si el usuario puede tocar sin miedo a pulsar otro elemento, la experiencia mejora.
Las formas también comunican: botones redondeados suelen percibirse como más amigables; los rectangulares, como más formales o corporativos. Lo importante es la coherencia: no mezcles cinco estilos de botón en la misma web.
Estados y microinteracciones que mejoran la UX
Hover, active, focus y disabled: qué debe cambiar y por qué
Un botón estático es como un semáforo que nunca cambia de color: genera dudas. Los estados sirven para que el usuario entienda, de forma inmediata, que su acción tiene respuesta.
Hover (al pasar el ratón): cambia color, añade sombra o subraya. No abuses de animaciones locas, basta un pequeño feedback visual.
Active (al hacer clic): simula un “hundimiento” o una presión. Es lo que nos confirma que el clic se registró.
Focus (cuando usas teclado): borde visible, normalmente azul. Clave para accesibilidad.
Disabled (inhabilitado): tono gris, menos contraste, indicando que esa acción aún no está disponible.
📌 Ejemplo práctico:
Hover: botón azul que se aclara al pasar el ratón.
Active: botón que se “hunde” un par de píxeles.
Focus: borde amarillo marcado.
Disabled: mismo botón en gris claro.
Feedback inmediato: loaders, confirmaciones y prevención de dobles clics
El usuario odia la incertidumbre. Si pulsa un botón y no pasa nada, lo más probable es que haga doble clic (o cierre la página). Y ahí vienen los problemas: compras duplicadas, formularios enviados dos veces, errores.
La solución: feedback inmediato.
Un loader dentro del botón (“Cargando…” con un spinner).
Un cambio de texto instantáneo: “Enviando…” que luego pasa a “¡Listo!”.
O incluso una confirmación visual: un check ✅ animado tras completar la acción.
Ejemplo:
Botón “Reservar ahora” → al hacer clic pasa a “Procesando…” con un icono animado → después “¡Reserva confirmada!”.
Este tipo de microinteracciones no solo evitan errores, también transmiten profesionalidad y cuidado por la experiencia del usuario. Y sí, Google también lo valora porque impacta en la satisfacción de uso, que cada vez pesa más en SEO.
Ubicación y contexto: dónde colocarlos para convertir
Above the fold vs. después de valor
Aquí hay un error clásico: poner el botón de “Compra ya” nada más cargar la página. ¿Funciona? Solo si el usuario ya venía decidido (ejemplo: reservar taxi o comprar entradas). Pero en la mayoría de los casos, pedir la acción sin calentar al usuario es como proponer matrimonio en la primera cita: un “no” asegurado.
Above the fold (visible sin hacer scroll): perfecto para CTAs sencillos y de respuesta rápida, como “Descargar guía” o “Llamar ahora”.
Después de aportar valor: si tu web vende un curso, software o servicio más complejo, primero explica beneficios, muestra pruebas sociales, y después pide la acción.
👉 Lo ideal: combinar ambos. Un botón visible arriba para los decididos + CTAs repartidos estratégicamente en puntos clave del scroll.
Patrones de layout: F/Z patterns, barras sticky y CTA secundarios
El ojo humano escanea las páginas web siguiendo patrones:
Patrón F: típico en blogs o páginas con mucho texto. Botones bien colocados en la parte izquierda o final de secciones.
Patrón Z: más visual, usado en landings modernas. Los CTAs suelen estar al final de cada “diagonal” de la Z.
A eso súmale recursos como:
Barras sticky: un botón fijo abajo en móvil tipo “Reservar ahora” siempre a mano.
CTA secundarios: si tu CTA principal es “Contratar”, añade un secundario menos comprometido como “Saber más” o “Agendar demo”. Así no pierdes a quien aún no está listo para la acción principal.
Mobile first: pulgares, zonas calientes y barras inferiores
El 80% del tráfico de la mayoría de webs viene de móvil. ¿Dónde solemos tener el pulgar? Abajo. ¿Dónde ponemos los botones? Muchas veces… arriba 🙃. Error de libro.
Coloca CTAs en la parte inferior o dentro de la zona caliente del pulgar.
Usa tamaños adecuados: al menos 44x44px (recomendación de Apple) para que sean clicables sin ampliar.
Evita pegarlos demasiado: botones muy juntos en móvil = clics equivocados.
Parte práctica: cómo crear botones en desarrollo web
Botones con HTML y CSS desde cero
Lo más básico y universal: un botón con HTML y CSS. Aquí lo importante es diferenciar un botón real (<button>) de un enlace con apariencia de botón (<a>). Ambos son válidos, pero tienen contextos distintos:
<button>: para acciones dentro de formularios o que disparan un evento JS.<a>conhref: para navegación, redirección o descarga.
Con CSS puedes jugar con:
Colores y degradados para adaptarlos a tu marca.
Bordes redondeados para dar sensación más amigable (ejemplo: estilo “pill”).
Sombras sutiles y transiciones que inviten al clic.
👉 Un recurso práctico que recomiendo es tener una librería de estilos reutilizables en CSS para botones. Así mantienes consistencia y ahorras tiempo.
<button class="btn">Haz clic aquí</button>
<a href="/contacto" class="btn btn-secundario">Contáctanos</a>
/* Estilos base reutilizables */
.btn {
background: linear-gradient(135deg, #0E6BA8, #0B4F7B); /* degradado corporativo */
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 8px; /* esquinas suaves tipo “pill” */
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* sombra sutil */
}
.btn:hover {
background: linear-gradient(135deg, #0B4F7B, #093856); /* cambio de degradado */
transform: translateY(-2px); /* efecto “levantar” */
}
.btn-secundario {
background: #FF6F61; /* color alternativo */
}
Botones con JavaScript: estados, deshabilitar/activar y loaders
El front-end moderno exige que los botones no solo “estén ahí”, sino que den feedback. Ejemplos:
Botones deshabilitados hasta que se complete un formulario.
Botones con loader cuando envías un formulario o realizas una acción.
Botones con cambio de estado dinámico: “Añadir al carrito” → “Producto añadido ✅”.
Esto no es un capricho estético: ayuda a la usabilidad porque el usuario entiende qué está pasando y evita clics repetidos o frustración.
<button id="btn-form" class="btn" disabled>Enviar</button>
/* Estado deshabilitado */
.btn:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
}
// Simulación: activar el botón tras completar un formulario
const btn = document.getElementById('btn-form');
// Simulación de validación
setTimeout(() => {
btn.disabled = false;
btn.textContent = "Enviar ahora";
}, 2000);
// Simulación de loader al hacer clic
btn.addEventListener('click', () => {
btn.disabled = true;
btn.textContent = "Enviando...";
setTimeout(() => {
btn.textContent = "¡Enviado ✅!";
}, 2000);
});
Botones accesibles: semántica, roles y atributos aria-*
Muchos desarrolladores caen en el error de usar un <div> o un <span> con onclick para simular botones. Esto rompe la accesibilidad y hace que los lectores de pantalla no los detecten.
Para hacerlo bien:
Usa
<button>o<a>siempre que sea posible.Si necesitas personalizar mucho, añade atributos como
role="button"ytabindex="0".Complementa con etiquetas
aria-labelcuando el texto del botón no sea suficientemente descriptivo (ejemplo: icono de lupa que en realidad es “Buscar”).
Esto no solo es un tema de inclusión: también mejora tu SEO indirectamente, porque Google valora la accesibilidad como parte de la experiencia de usuario.
<button>Buscar productos</button>
<button aria-label="Buscar">
<svg width="16" height="16" fill="currentColor">
<path d="M11 6a5 5 0 1 0-1.293 3.293l4 4 1.414-1.414-4-4A5 5 0 0 0 11 6z"/>
</svg>
</button>
<div role="button" tabindex="0" aria-label="Descargar archivo">⬇️</div>
Reutilización: variables CSS, design tokens y clases utilitarias
Cuando trabajas en un proyecto grande, no quieres tener 50 estilos distintos de botones. Lo ideal es definir:
Variables CSS (custom properties): para colores, tamaños, tipografía.
Design tokens: que permiten escalar el diseño en equipos grandes y mantener coherencia en marca.
Clases utilitarias: estilo Tailwind, donde puedes aplicar estilos consistentes sin reinventar la rueda cada vez.
/* Variables CSS globales */
:root {
--color-primary: #0E6BA8;
--color-primary-dark: #093856;
--color-secondary: #FF6F61;
--border-radius: 8px;
--spacing-y: 12px;
--spacing-x: 24px;
}
/* Estilo base de botones usando variables */
.btn {
background: var(--color-primary);
color: #fff;
padding: var(--spacing-y) var(--spacing-x);
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: var(--color-primary-dark);
}
.btn-secondary {
background: var(--color-secondary);
}
Botones con maquetadores visuales (WordPress)
Aterrizamos todo lo anterior en Elementor, Divi y Gutenberg. La idea: crear estilos globales reutilizables, cuidar accesibilidad (focus visible, contraste, aria-*) y añadir microinteracciones (hover, loader) sin reventar el rendimiento.
Elementor: botón, estilos globales y responsive
Objetivo: un estilo de botón global “Primario” que puedas aplicar en 2 clics, con hover/focus accesibles y opción de loader.
Ruta rápida (UI):
Site Settings → Theme Style → Buttons (o Global Colors/Fonts).
Crea un Global Token (p. ej. Primary Button).
En cada Button Widget, asigna Style → Typography/Colors con Global.
En Advanced → CSS Classes, añade:
z-btn z-btn--primary.
CSS (añade en Site Settings → Custom CSS o en el tema hijo):
/* Base accesible y reutilizable */
.z-btn {
--btn-bg: #0E6BA8;
--btn-bg-hover: #09486B;
--btn-color: #fff;
--btn-radius: 10px;
--btn-pad-y: 12px; --btn-pad-x: 22px;
background: var(--btn-bg);
color: var(--btn-color);
border: none;
border-radius: var(--btn-radius);
padding: var(--btn-pad-y) var(--btn-pad-x);
font-weight: 600;
line-height: 1;
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Hover / Active */
.z-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.z-btn:active { transform: translateY(0); }
/* Focus visible para accesibilidad teclado */
.z-btn:focus-visible {
outline: 3px solid #FFD166; /* alto contraste */
outline-offset: 2px;
}
/* Estado disabled */
.z-btn:disabled,
.z-btn[aria-disabled="true"] {
background: #c9c9c9; color: #6a6a6a; box-shadow: none; cursor: not-allowed;
}
/* Variante secundaria */
.z-btn--secondary { --btn-bg: #FF6F61; --btn-bg-hover:#e95b4e; }
Loader opcional (sin plugin):
Añade la clase
js-loading-btnal botón.Inserta un HTML Widget al final de la página con este JS (o en Theme Builder para global):
<script type="litespeed/javascript">document.addEventListener('click',function(e){const btn=e.target.closest('.js-loading-btn');if(!btn||btn.disabled)return;const original=btn.innerHTML;btn.disabled=!0;btn.setAttribute('aria-busy','true');btn.innerHTML='<span class="z-spinner" aria-hidden="true"></span> Procesando…';setTimeout(()=>{btn.innerHTML='¡Listo!';btn.removeAttribute('aria-busy')},1200);setTimeout(()=>{btn.innerHTML=original;btn.disabled=!1},2200)})</script> <style>.z-spinner{
display:inline-block; width:1em; height:1em; margin-right:.5em;
border:.18em solid rgba(255,255,255,.5); border-top-color:#fff;
border-radius:50%; animation: zspin .8s linear infinite; vertical-align:-2px;
}
@keyframes zspin{to{transform:rotate(360deg)}}</style>
Buenas prácticas Elementor
Define Global Colors/Fonts y no estilices botón por botón.
Revisa Responsive → Mobile: padding grande y ancho mínimo en móvil.
Usa
aria-labelsi el botón es solo icono.
Divi: módulos, estados y presets reutilizables
Objetivo: crear un Preset de botón para reaprovechar en todo el sitio con foco accesible y variantes.
Ruta rápida (UI):
Inserta Button Module → Design.
Ajusta Tipografía/Color/Borde/Sombra.
Guarda como Preset (Icono engranaje del módulo → Create New Preset From Current Styles).
Añade CSS Class:
z-btn z-btn--primary.
CSS global (Divi → Theme Options → Custom CSS):
/* Preserva estilos de Divi, solo añadimos accesibilidad y variantes */
.et_pb_button.z-btn {
--btn-bg:#0E6BA8; --btn-bg-hover:#09486B; --btn-color:#fff; --radius: 10px;
background: var(--btn-bg) !important; color: var(--btn-color) !important;
border-radius: var(--radius); border: none !important;
box-shadow: 0 6px 14px rgba(0,0,0,.12);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.et_pb_button.z-btn:hover { background: var(--btn-bg-hover) !important; transform: translateY(-1px); }
.et_pb_button.z-btn:focus-visible {
outline: 3px solid #FFD166; outline-offset: 2px;
}
.et_pb_button.z-btn:disabled { background:#c9c9c9 !important; color:#6a6a6a !important; box-shadow:none; cursor:not-allowed; }
/* Variante secundaria */
.et_pb_button.z-btn--secondary { --btn-bg:#FF6F61; --btn-bg-hover:#e95b4e; }
Loader ligero en Divi (Integration → Add code to the <body>):
<script type="litespeed/javascript">document.addEventListener('click',function(e){const btn=e.target.closest('.et_pb_button.z-btn.js-loading-btn');if(!btn||btn.disabled)return;const label=btn.textContent.trim();btn.disabled=!0;btn.setAttribute('aria-busy','true');btn.innerHTML='<span class="z-spinner" aria-hidden="true"></span> '+(btn.dataset.loading||'Enviando…');setTimeout(()=>{btn.innerHTML='¡Listo!';btn.removeAttribute('aria-busy')},1200);setTimeout(()=>{btn.textContent=label;btn.disabled=!1},2200)})</script> <style>.z-spinner{ display:inline-block;width:1em;height:1em;margin-right:.5em;border:.18em solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:zspin .8s linear infinite;vertical-align:-2px;}
@keyframes zspin{to{transform:rotate(360deg)}}</style>
Tip útil Divi
Usa Presets + Global Defaults. Cambias una vez, cambia en todo el sitio.
Activa icono en botón solo si aporta contexto; añade
aria-labelsi el texto no es suficiente.
Gutenberg: bloque Botón, grupos, stack y patrones
Objetivo: usar el bloque Botón con clases personalizadas y CSS global para un sistema coherente. Crear un Patrón de sección con CTA.
Ruta rápida (UI):
Inserta Bloques → Botones → Botón.
En la barra lateral, añade Clase adicional de CSS:
z-btn z-btn--primary.Crea un Patrón (Agrupa sección con título + texto + botón, y guárdalo como patrón reutilizable).
CSS (Apariencia → Personalizar → CSS adicional) o en tu tema hijo:
/* Base para Bloque Botón (Gutenberg genera <a class="wp-element-button">) */
.wp-element-button.z-btn {
--btn-bg:#0E6BA8; --btn-bg-hover:#09486B; --btn-color:#fff; --radius:10px;
background: var(--btn-bg); color: var(--btn-color);
border-radius: var(--radius); border: none; padding: 12px 22px; font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.wp-element-button.z-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.wp-element-button.z-btn:focus-visible { outline:3px solid #FFD166; outline-offset:2px; }
.wp-element-button.z-btn[aria-disabled="true"] { background:#c9c9c9; color:#6a6a6a; box-shadow:none; cursor:not-allowed; }
/* Variantes */
.wp-element-button.z-btn--secondary { --btn-bg:#FF6F61; --btn-bg-hover:#e95b4e; }
Loader (coloca JS con Code Snippets o en tu tema hijo):
<script type="litespeed/javascript">document.addEventListener('click',function(e){const btn=e.target.closest('.wp-element-button.z-btn.js-loading-btn');if(!btn||btn.getAttribute('aria-busy')==='true')return;const original=btn.innerHTML;btn.setAttribute('aria-busy','true');btn.classList.add('is-busy');btn.innerHTML='<span class="z-spinner" aria-hidden="true"></span> '+(btn.dataset.loading||'Procesando…');setTimeout(()=>{btn.innerHTML='Hecho ✅';btn.classList.remove('is-busy');btn.removeAttribute('aria-busy')},1200);setTimeout(()=>{btn.innerHTML=original},2200)})</script> <style>.wp-element-button.z-btn.is-busy { pointer-events:none; opacity:.9; }
.z-spinner{ display:inline-block;width:1em;height:1em;margin-right:.5em;border:.18em solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:zspin .8s linear infinite;vertical-align:-2px;}
@keyframes zspin{to{transform:rotate(360deg)}}</style>
Patrón recomendado (estructura, no hace falta plugin):
Grupo → (Heading H2 + P + Botón con clase
z-btn z-btn--primary js-loading-btn).Guarda como Patrón “Hero con CTA”.
Buenas prácticas Gutenberg
Evita inyectar
<span onclick>: usa el bloque Botón (semántica correcta).En Estilos del tema (theme.json) define variables de color/tipo para mantener consistencia.
Extra práctico: botones con frameworks y librerías
Aprovechamos Bootstrap y Tailwind para ir rápido sin renunciar a accesibilidad y coherencia. Sumamos SVG para iconos limpios y microinteracciones que no lastiman el rendimiento.
Bootstrap: patrones listos + personalización responsable
Objetivo: usar la semántica y utilidades de Bootstrap, pero sin quedarnos en el “default look”. Creamos variantes y cuidamos focus/contraste.
<button class="btn btn-primary d-inline-flex align-items-center gap-2" type="button">
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 12h18M12 3v18"/>
</svg>
Empezar ahora
</button>
<button class="btn btn-outline-secondary" type="button" aria-label="Abrir búsqueda">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
</svg>
</button>
CSS: estilos de marca + focus visible + motion-safe
/* Personaliza variables de Bootstrap (ideal en SCSS) o override directo */
.btn-primary{
background:#0E6BA8; border-color:#0E6BA8;
}
.btn-primary:hover{ background:#09486B; border-color:#09486B; }
/* Focus visible consistente y accesible (para todos los botones) */
.btn:focus-visible{
outline:3px solid #FFD166; outline-offset:2px;
}
/* Microanimación segura */
@media (prefers-reduced-motion: no-preference){
.btn{ transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-1px); }
}
Loader rápido con Bootstrap (no requiere JS de Bootstrap):
<button class="btn btn-primary js-loading" type="button">Enviar</button> <script type="litespeed/javascript">document.addEventListener('click',(e)=>{const b=e.target.closest('.js-loading');if(!b||b.dataset.busy)return;const original=b.innerHTML;b.dataset.busy="1";b.disabled=!0;b.setAttribute('aria-busy','true');b.innerHTML=`<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Procesando…`;setTimeout(()=>{b.innerHTML='¡Listo!';b.removeAttribute('aria-busy')},1200);setTimeout(()=>{b.innerHTML=original;b.disabled=!1;delete b.dataset.busy},2200)})</script>
Tailwind CSS: utilidades + design tokens (theme) + variantes
Objetivo: mantener consistencia definiendo colores/radios en tailwind.config.js y componiendo botones con clases utilitarias. Añadimos componentes con @apply.
tailwind.config.js (extracto)
module.exports = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#0E6BA8',
dark: '#09486B',
secondary: '#FF6F61'
}
},
borderRadius: { 'brand': '10px' }
}
}
}
CSS (archivo components.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply inline-flex items-center justify-center font-semibold text-white
px-5 py-3 rounded-brand shadow transition;
}
.btn-primary { @apply bg-brand hover:bg-brand-dark; }
.btn-secondary { @apply bg-brand-secondary hover:brightness-95; }
.btn:focus-visible{
outline: 3px solid #FFD166; outline-offset: 2px;
}
}
HTML (Tailwind)
<button class="btn btn-primary gap-2" type="button">
<svg class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12h18M12 3v18"/></svg>
Empezar ahora
</button>
<button class="btn btn-secondary p-3" aria-label="Abrir búsqueda" type="button">
<svg class="w-4 h-4" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/></svg>
</button>
Loader con Tailwind (ligero, sin dependencias)
<button class="btn btn-primary js-tw-loading" type="button">Enviar</button> <script type="litespeed/javascript">document.addEventListener('click',(e)=>{const b=e.target.closest('.js-tw-loading');if(!b||b.dataset.busy)return;const original=b.innerHTML;b.dataset.busy="1";b.disabled=!0;b.setAttribute('aria-busy','true');b.innerHTML=`<svg class="w-4 h-4 mr-2 animate-spin inline" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" stroke="white" stroke-width="4" fill="none" opacity=".35"/>
<path d="M22 12a10 10 0 0 1-10 10" stroke="white" stroke-width="4" fill="none"/>
</svg>Procesando…`;setTimeout(()=>{b.innerHTML='¡Listo!';b.removeAttribute('aria-busy')},1200);setTimeout(()=>{b.innerHTML=original;b.disabled=!1;delete b.dataset.busy},2200)})</script>
Iconos y microinteracciones SVG sin penalizar rendimiento
Buenas prácticas:
Inline SVG (como en los ejemplos): permite heredar
currentColor, animar con CSS y evitar más requests.Añade
aria-hidden="true"si el icono es decorativo; usaaria-label/texto visible si comunica acción.Microinteracciones suaves: rotación, escala leve, cambios de opacidad. Respeta
prefers-reduced-motion.
<button class="btn btn-primary gap-2" type="button">
<svg class="w-4 h-4 icon-rotate" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
</svg>
Continuar
</button><style>.icon-rotate{ transition: transform .2s ease; }
.btn:hover .icon-rotate{ transform: rotate(15deg) scale(1.05); }
@media (prefers-reduced-motion: reduce){
.icon-rotate, .btn{ transition: none; }
}</style>
Accesibilidad sin excusas
Crear botones para páginas web también es crear experiencias inclusivas. Un botón accesible reduce fricción, mejora la conversión y evita problemas legales. Vamos a lo práctico.
Contraste, foco visible y navegación por teclado
Contraste mínimo: 4.5:1 entre texto del botón y su fondo (WCAG AA).
Foco visible: si navego con teclado (Tab/Shift+Tab) debo ver claramente qué botón está activo.
Orden lógico de tabulación: el foco debe seguir el flujo visual.
/* Foco visible consistente en todos los botones */
button:focus-visible,
a.wp-element-button:focus-visible,
.et_pb_button:focus-visible {
outline: 3px solid #FFD166; /* color alto contraste */
outline-offset: 2px;
}
Lectores de pantalla: etiquetas, propósito y coherencia
Si el botón solo tiene icono, añade
aria-labelcon la acción (ej. “Abrir búsqueda”).Si el texto es ambiguo (“Enviar”), considera añadir contexto cercano o
aria-describedby.Evita repetir botones con la misma etiqueta para acciones distintas en la misma vista.
<button aria-label="Abrir búsqueda">
<svg aria-hidden="true" focusable="false" ...>...</svg>
</button>
<button>
<svg aria-hidden="true" ...>...</svg>
Descargar informe
</button>
Roles, aria-labels y semántica: botón no es un con onclick
Usa
<button>para acciones;<a href>para navegación.Solo como último recurso, convierte un contenedor en botón con
role="button"+tabindex="0"+ manejo de teclado.
<span onclick="comprar()">Comprar</span>
<span role="button" tabindex="0" aria-label="Comprar ahora"
onclick="comprar()"
onkeydown="if(event.key==='Enter' || event.key===' '){comprar()}">
Comprar
</span>
Tip rápido: Prueba tu página con teclado. Si no puedes completar la acción sin ratón, no es accesible.
Medición y mejora continua
Si no mides, asumes. Etiqueta tus CTAs, observa el comportamiento y mejora con datos.
Etiquetado de eventos: GA4/Tag Manager para saber qué clican
Opción ligera sin GTM (vanilla JS + GA4):
<button class="btn" data-cta="plan_pro" id="cta-plan-pro">Empezar Plan Pro</button> <script type="litespeed/javascript">window.dataLayer=window.dataLayer||[];document.addEventListener('click',(e)=>{const cta=e.target.closest('[data-cta]');if(!cta)return;dataLayer.push({event:'cta_click',cta_id:cta.id||null,cta_name:cta.dataset.cta,cta_text:cta.textContent.trim(),cta_location:'pricing_table'})})</script>
Luego, en GA4 creas el evento recomendado (o personalizado) a partir de event=cta_click y mapeas parámetros.
Test A/B de copy, color y posición:
Empieza por lo que más impacto suele tener:
Copy del botón (beneficio directo vs. acción genérica).
Posición (above the fold, sticky en móvil, final de secciones).
Color/contraste (pero respetando tu guía de marca).
Mini snippet de test muy simple (50/50 copy):
<button class="btn js-ab-cta" data-variant-a="Probar gratis"
data-variant-b="Empieza sin pagar">Probar gratis</button> <script type="litespeed/javascript">document.querySelectorAll('.js-ab-cta').forEach(btn=>{const variant=Math.random()<0.5?'a':'b';btn.textContent=btn.dataset['variant'+variant.toUpperCase()];btn.dataset.variant=variant;btn.addEventListener('click',()=>{dataLayer.push({event:'cta_test_click',variant})})})</script>
Con eso ya puedes ver en GA4 qué variant gana más clics.
Preguntas frecuentes sobre crear botones para páginas web
Usa <a href> cuando la acción lleve a otra URL (navegación o descarga). Usa <button> para acciones (enviar formularios, abrir modales, ejecutar JS). Esto mantiene semántica correcta, mejora accesibilidad y hace tu HTML más claro para buscadores y lectores de pantalla.
Como referencia, 44×44 px mínimo de área táctil (Apple/WCAG). Usa padding vertical generoso (12–16px) y un tamaño de fuente legible (≥16px). Deja espacio entre botones para evitar toques accidentales.
El color por sí mismo no “vende”, pero el contraste y la consistencia sí. Asegúrate de que el botón principal no compita con otros elementos visuales. Prioriza el copy (beneficio) y la ubicación (momento del funnel) antes que cambiar de verde a rojo.
Tres pasos:
Usa etiquetas semánticas (
<button>,<a href>).Asegura contraste y foco visible (reglas CSS anteriores).
Añade
aria-labelsolo cuando el texto visible no describa bien la acción (iconos solos).
En móvil no hay hover, pero el loader y el feedback al hacer clic ayudan mucho. Reducen la ansiedad del usuario y evitan clics duplicados (errores y frustración). Son pequeñas pero mejoran la UX y, por extensión, tus métricas.
Sí. Define clases y variables CSS globales (.z-btn, --btn-bg, --btn-radius) y aplícalas en cada maquetador. Así logras coherencia sin rehacer estilos en cada constructor.
Conclusión
Crear botones para páginas web no es “poner un cuadrito con color”. Es diseñar puntos de decisión que conectan intención con acción. Si cuidas los fundamentos de UX (affordance, jerarquía, copy y contraste), respetas la accesibilidad, implementas estados y microinteracciones que den feedback y mides con datos, tus botones dejan de ser decoración y se convierten en palancas de negocio.
Da igual si trabajas con HTML/CSS/JS, con Elementor, Divi o Gutenberg, o si te apoyas en Bootstrap/Tailwind: el objetivo es el mismo. Botones que se identifican a la primera, se entienden sin pensar y se sienten confiables. Con eso, el clic llega solo.
