Cómo hacer un botón en WordPress Gutenberg — con y sin código

Expertos en SEO

Crear un botón en WordPress es de esas cosas que parecen triviales… hasta que te pones y quieres que quede bonito, accesible, rápido y bien enlazado. La verdad es que, con Gutenberg, lo puedes resolver en dos caminos: sin código (bloque Botones) y con código (HTML + CSS propio). Aquí te explico ambos, paso a paso, con ejemplos reales, trucos de SEO, y un par de anécdotas “de taller” que te ahorrarán sustos.

¿Cuándo usar cada método?

Gutenberg sin código (bloque Botones)
Ideal para la mayoría de casos: CTA en entradas, enlaces a páginas de servicio, descargas… Es rápido, visual y suficiente para el 90% de los escenarios.
HTML + CSS (con código)
Cuando necesitas control absoluto: estilos de marca muy concretos, microinteracciones avanzadas, o reutilizar el mismo botón en distintos sitios con una sola clase CSS. Es más flexible y escalable.

Anécdota rápida: “anda que” no he visto veces un botón hecho con el bloque por defecto que luego el cliente quería igualito que el de su landing en Figma. Total, que pasamos a CSS y asunto resuelto en cinco minutos.

Parte 1 — Botón en Gutenberg sin código

Paso 1: Insertar el bloque

En el editor, pulsa “+” y busca “Botones”.
WordPress insertará un contendor de botones con un primer botón dentro.
Escribe el texto: “Reservar ahora”, “Pedir presupuesto”, lo que sea.

Paso 2: Añadir el enlace y opciones clave

Haz clic en el botón y pulsa el icono de enlace.
Pega la URL de destino.
En el icono del lápiz/ajustes del enlace:
- Abrir en una nueva pestaña: actívalo cuando enlazas a webs externas o documentos.
- Añadir rel (nofollow/sponsored):
  - Nofollow: si no quieres pasar autoridad (p. ej., política de privacidad, Términos).
  - Sponsored: si es un enlace de afiliados o patrocinado.
  - Uff, ni idea: si dudas, para enlaces internos importantes no uses nofollow; para afiliación, sí usa nofollow sponsored.

Tip SEO: abrir en nueva pestaña añade target="_blank". A nivel de seguridad, añade también rel="noopener noreferrer" (Gutenberg suele gestionarlo, pero mejor revisarlo si lo editas a mano).

Paso 3: Estilos rápidos (sin tocar CSS)

Con el botón seleccionado, a la derecha verás dos pestañas: Ajustes y Estilos.

Ancho: puedes elegir presets (auto, 25%, 50%, 75%, 100%).
Estilo: Relleno (fondo sólido) o Contorno (borde).
Color: elige Color del texto y Color de fondo.
Tipografía: tamaño y grosor.
Borde y esquinas:
- Radio: 0 = cuadrado, 50 = súper redondo.
- Borde: grosor/estilo/color si te va el rollo outline.
Alineación del contenedor (Izquierda, Centro, Derecha). Para centrar, suele bastar con seleccionar el bloque Botones (no el botón en sí) y elegir Centrar.

“De hecho”, el bloque Botones admite varios botones en fila. Útil para “Comprar” + “Saber más”, por ejemplo.

Paso 4: Una clase CSS para afinar luego (opcional)

En Avanzado → Clase CSS adicional, añade algo como cta-principal.
No hace falta ahora, pero si más tarde quieres un toque fino con CSS global, te vendrá de lujo.

Errores comunes (sin código)

Texto genérico: evita “Haz clic aquí”. Mejor descriptivo: “Descargar guía PDF”, “Ver tarifas”.
Contraste pobre: botón claro con texto claro… mal. Revisa que haya buen contraste.
Demasiados estilos en la misma página: si cada botón es de su padre y de su madre, el usuario se pierde y la marca también.

Parte 2 — Botón con HTML + CSS (control total)

Aquí vas a construir un botón con una etiqueta <a> y una clase CSS. Es más potente que el bloque por defecto cuando quieres diseño de marca y animaciones fluidas.

Anécdota típica: “es más”, cuando el equipo de diseño me cambia el color o el radio de las esquinas, con una sola clase actualizo todos los botones del sitio. En fin, bendita escalabilidad.

2.1. HTML base (en bloque “HTML personalizado”)

<a class="btn-mi-cta" href="https://tu-destino.com"
   target="_blank" rel="noopener"
   title="Reserva tu visita guiada en Madrid">
  Reservar ahora
</a>

href: destino.
target="_blank": abre en nueva pestaña (opcional).
rel="noopener" (y noreferrer si procede): seguridad/rendimiento al abrir en nueva pestaña.
title: ayuda (ligera) a la accesibilidad, pero no sustituye a un buen texto del botón.

Para afiliados: rel="nofollow sponsored".

2.2. CSS de base (global y reutilizable)

Colócalo en Apariencia → Personalizar → CSS adicional (temas clásicos) o usa un plugin de CSS, o theme.json si trabajas con temas de bloques.

/* Estilo base del botón */
.btn-mi-cta {
  display: inline-block;                 /* que respete padding y se comporte como botón */
  background: #111;                      /* fondo principal */
  color: #fff;                           /* texto */
  text-decoration: none;                 /* sin subrayado */
  padding: 0.8rem 1.4rem;                /* vertical | horizontal */
  border-radius: 999px;                  /* súper redondo; prueba 12px si lo prefieres */
  border: 2px solid #111;                /* borde a juego con el fondo */
  font-weight: 600;                      /* un pelín de énfasis */
  line-height: 1;                        /* compactito */
  transition: all .25s ease;             /* animación suave */
}

/* Hover/focus: accesible y con feedback */
.btn-mi-cta:hover,
.btn-mi-cta:focus {
  background: transparent;               /* efecto “outline” al pasar */
  color: #111;
  transform: translateY(-1px);           /* microinteracción */
  outline: none;
}

/* Estado active (clic) */
.btn-mi-cta:active {
  transform: translateY(0);              /* vuelve rápido para dar sensación de “clic” */
}

/* Variante secundaria (si quieres otra opción de color) */
.btn-mi-cta--secundaria {
  background: #0057ff;
  border-color: #0057ff;
}
.btn-mi-cta--secundaria:hover,
.btn-mi-cta--secundaria:focus {
  background: transparent;
  color: #0057ff;
}

/* Accesibilidad extra: foco visible para teclado */
.btn-mi-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,87,255,.35);
}

¿Y si quiero un botón “contorno” directamente?

Añade esta variante:

.btn-mi-cta--outline {
  background: transparent;
  color: #111;
}
.btn-mi-cta--outline:hover,
.btn-mi-cta--outline:focus {
  background: #111;
  color: #fff;
}

Y úsalo así:

<a class="btn-mi-cta btn-mi-cta--outline" href="/tarifas">Ver tarifas</a>

2.3. Botón con icono (ligero)

Sin librerías, con un simple “»” o un SVG mínimo.

<a class="btn-mi-cta" href="/contacto">
  Pide presupuesto <span aria-hidden="true">»</span>
</a>

Si prefieres SVG:

<a class="btn-mi-cta" href="/contacto">
  Pide presupuesto
  <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" style="margin-left:.4rem">
    <path d="M12 4l1.41 1.41L8.83 10H20v2H8.83l4.58 4.59L12 18l-8-8 8-8z" fill="currentColor"/>
  </svg>
</a>

El fill="currentColor" hace que el icono herede el color del texto: clave para que el hover se vea perfecto.

2.4. SEO y enlaces: decisiones prácticas

Enlaces internos importantes (servicios, landing): no uses nofollow.
Afiliación/patrocinados: rel="nofollow sponsored".
Política de privacidad/legales: suele ser indiferente; si no quieres pasar autoridad, nofollow.
title con palabra clave: aporta poco a SEO moderno, pero ayuda a usuarios (no abuses).

Checklist rápido para que no te la juegues

Texto del botón claro y accionable: “Reservar visita”, “Descargar guía”.
Contraste mínimo 4.5:1 (accesibilidad).
Foco visible para usuarios de teclado (:focus-visible).
Hover sutil (no marees), transition ~0.2–0.3s.
Consistencia: define 1–2 variantes de botón y repítelas; nada de arcoíris.
target="_blank" solo si tiene sentido; si lo usas, añade rel="noopener".
Reutilización: usa clases (cta-principal, cta-secundaria) y centraliza el CSS.

Cómo replicar en Gutenberg lo que harías con CSS

Si prefieres seguir en el mundo “sin código” pero quieres cierto control:

Crea un botón con el bloque.
En Avanzado → Clase CSS adicional, añade btn-mi-cta.
Pega el CSS anterior en tu sitio.
Para variantes, añade btn-mi-cta--outline o btn-mi-cta--secundaria en la clase adicional del botón que toque.

Ventaja: el editor sigue siendo visual, pero el estilo ya lo controlas tú. “O sea”, mejor de los dos mundos.

Errores frecuentes y cómo evitarlos

Usar <button> para navegar. El <button> es para acciones (abrir modal, enviar formulario). Para navegar, <a href>.
Inline styles por todas partes. Es tentador, pero difícil de mantener. Mejor una clase global.
Más de un CTA principal por pantalla. Diluyes la acción. Elige uno y resalta ese.
Botones muy grandes en móvil sin espacio alrededor. Deja espaciado vertical (margen) y revisa el ancho: 100% suele ir bien.
Quitar el subrayado a todos los enlaces (globalmente). Mala práctica. Quita solo en el botón, porque ya se ve “clicable”.

Plantilla de copia/pega (HTML + CSS) lista para producción

HTML (bloque “HTML personalizado”):

<p class="cta-wrap">
  <a class="btn-mi-cta" href="/reservar" title="Reservar visita en Madrid">
    Reservar visita
  </a>
  <a class="btn-mi-cta btn-mi-cta--outline" href="/tarifas" title="Ver tarifas de visitas guiadas">
    Ver tarifas
  </a>
</p>

CSS (global):

.cta-wrap { display:flex; gap:.75rem; flex-wrap:wrap; }

.btn-mi-cta {
  display:inline-block;
  background:#111;
  color:#fff;
  text-decoration:none;
  padding:.9rem 1.4rem;
  border-radius:999px;
  border:2px solid #111;
  font-weight:600;
  line-height:1;
  transition:all .25s ease;
}
.btn-mi-cta:hover,
.btn-mi-cta:focus { background:transparent; color:#111; transform:translateY(-1px); outline:none; }
.btn-mi-cta:focus-visible { box-shadow:0 0 0 3px rgba(0,0,0,.25); }
.btn-mi-cta:active { transform:translateY(0); }

.btn-mi-cta--outline { background:transparent; color:#111; }
.btn-mi-cta--outline:hover,
.btn-mi-cta--outline:focus { background:#111; color:#fff; }

Bonus: Gutenberg a fuego (truquitos finos)

Botón a ancho completo: en la barra del botón, usa “Ancho completo” o pon el contenedor de Botones al 100%.
Botón en “Contorno” con colores de marca: en “Estilos → Contorno”, define Borde y Texto con tu color corporativo.
Reutilizable: selecciona el bloque Botones y crea un Bloque reutilizable (“Guardar como patrón”). Así, cada vez que insertes el patrón, tendrás tus CTAs idénticos sin repetir trabajo.
Clases múltiples: en Avanzado, puedes añadir varias clases separadas por espacios: btn-mi-cta btn-mi-cta--secundaria.

Preguntas rápidas (FAQ)

¿Qué es mejor para SEO: nofollow o dofollow?
Depende. Para enlaces internos importantes, dofollow (es lo normal, y no hace falta poner nada). Para afiliados/patrocinados, rel="nofollow sponsored".

¿Pongo siempre target="_blank"?
No hace falta. Úsalo para enlaces externos o documentos; para navegación interna suele ser mejor no romper el flujo.

¿Y si mi tema no tiene “CSS adicional”?
En temas de bloques puede no aparecer. Instala un plugin de CSS personalizado o usa un child theme. También puedes definir estilos en theme.json, pero eso ya es “nivel cafetero”.

¿Puedo hacer un botón con degradado o sombra?
Claro:

.btn-mi-cta {
  background: linear-gradient(135deg, #111, #333);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

Eso sí, “a ver”, con moderación. Dos sombras bien puestas: elegancia; tres sombreados y cinco degradados: “es que” parece una feria.

Conclusión

Si quieres ir rápido y bien: bloque Botones de Gutenberg. Si quieres marca consistente y control total: HTML + CSS con una clase global. Digamos que no hay una sola respuesta; lo importante es que elijas un sistema, lo documentes (un mini design system de botones) y seas consistente.

“Total”, con los ejemplos y plantillas de arriba puedes:

crear botones en 30 segundos (sin código),
o definir un estilo de marca escalable (con código) que, “o sea”, te ahorrará tiempo cada vez que el diseño cambie.

Pues nada, botón listo, CTA claro, y a convertir.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

SEO Técnico para tu Web | Optimización en Google y motores de búsqueda IA

SEO Técnico para tu Web | Optimización en Google y motores de búsqueda IA

1. Definición e Importancia del SEO Técnico El SEO técnico es el proceso de optimizar un sitio web para que los motores de búsqueda puedan encontrar, comprender e indexar sus páginas correctamente. Más allá de simples checklists, ser un experto técnico implica...

Mega Guía de SEO Local: Estrategia Maestra para Dominar Google My Business y el Local Pack

Mega Guía de SEO Local: Estrategia Maestra para Dominar Google My Business y el Local Pack

El SEO Local no es una opción; es el motor de la facturación para cualquier negocio con presencia física. Dominar las búsquedas transaccionales (Palabra Clave + Ciudad) es la diferencia entre ser el líder del mercado o ser invisible. Para alcanzar el éxito, no basta...

Qué es el GEO (Generative Engine Optimization) y cómo optimizar tu contenido para motores de IA

Qué es el GEO (Generative Engine Optimization) y cómo optimizar tu contenido para motores de IA

El GEO no viene a sustituir al SEO, sino a complementarlo. Mientras que el SEO tradicional te ayuda a aparecer en una lista de resultados, el GEO busca que tu contenido sea la respuesta directa que la IA entrega al usuario. 1. Fundamentos: ¿En qué se diferencia el GEO...

« Entradas más antiguas