Crear un botón de llamada a la acción en el menú principal de WordPress usando solo CSS
Este tutorial explica, paso a paso y con todo lujo de detalles, cómo convertir un ítem del menú principal de WordPress en un botón de llamada a la acción (CTA) usando únicamente CSS. No se necesita JavaScript. Incluye alternativas para añadir la clase al elemento del menú (desde el administrador o con un pequeño fragmento PHP), estilos para escritorio y móvil, consideraciones de accesibilidad y resolución de problemas.
Resumen del enfoque
- Paso 1: Identificar el elemento del menú que quieres convertir en botón (puedes asignarle una clase CSS en Apariencia → Menús).
- Paso 2: Añadir reglas CSS que lo estilicen como botón, con estados hover/focus y adaptaciones móviles.
- Paso 3 (opcional): Si no puedes editar la clase desde el administrador, añadirla con un pequeño filtro PHP.
Requisitos
- Acceso al panel de administración de WordPress (Apariencia → Menús) o acceso a los archivos del tema/child theme para añadir CSS/PHP.
- Capacidad de añadir CSS personalizado (Apariencia → Personalizar → CSS adicional) o editar el archivo style.css del child theme.
1) Cómo identificar/añadir una clase CSS al elemento del menú
- En el Escritorio de WordPress, ve a Apariencia → Menús.
- Si no ves el campo CSS Classes, abre Opciones de pantalla (arriba a la derecha) y activa CSS Classes.
- En el elemento de menú que será CTA, abre sus opciones y en Clase CSS (opcional) escribe, por ejemplo, btn-cta.
- Guarda el menú.
Si no puedes añadir la clase desde el administrador, en la sección de más abajo hay un fragmento PHP que añade la clase a un item concreto por su ID.
2) CSS básico para transformar el enlace del menú en botón
A continuación tienes un bloque CSS completo y comentado. Ajusta variables de color, tamaños y selectores según la estructura de tu tema (p. ej. .main-navigation, .site-navigation, .nav, .menu, etc.). Si tu tema utiliza otro contenedor, sustituye .main-navigation por el selector adecuado.
/ Selector genérico: apunta al enlace del menú que tenga la clase btn-cta /
.main-navigation .menu a.btn-cta,
.site-navigation .menu a.btn-cta {
display: inline-block / Para que el padding funcione como botón /
padding: 0.6rem 1.1rem / Ajusta alto y ancho /
background: linear-gradient(135deg,#ff6b6b,#ff3b30) / Gradiente visual /
color: #fff / Texto del botón /
border-radius: 30px / Píldora /
text-transform: uppercase
font-weight: 700
letter-spacing: 0.6px
box-shadow: 0 6px 18px rgba(255,59,48,0.18)
border: 0
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease
text-decoration: none
}
/ Icono antes del texto (opcional): usa un emoji o carácter Unicode /
.main-navigation .menu a.btn-cta::before {
content: 📞 / Cambia por el icono deseado o elimina la regla /
margin-right: 0.5rem
display: inline-block
transform: translateY(-1px)
}
/ Hover y focus (accesible para teclado) /
.main-navigation .menu a.btn-cta:hover,
.main-navigation .menu a.btn-cta:focus {
transform: translateY(-3px)
box-shadow: 0 10px 30px rgba(255,59,48,0.22)
opacity: 0.98
outline: none
}
/ Focus-visible para distinguir foco por teclado (mejor accesibilidad) /
.main-navigation .menu a.btn-cta:focus-visible {
box-shadow: 0 0 0 4px rgba(255,107,107,0.18), 0 10px 30px rgba(255,59,48,0.22)
}
/ Estado activo (cuando la página corresponde a ese enlace) /
.main-navigation .menu .current-menu-item > a.btn-cta {
background: linear-gradient(135deg,#ff3b30,#ff6b6b) / Inversión leve /
}
/ Alternativa si tu tema coloca el enlace en bloque: asegúrate de que no rompa el layout /
.main-navigation .menu li {
display: inline-block
}
/ Preferencias de movimiento reducido /
@media (prefers-reduced-motion: reduce) {
.main-navigation .menu a.btn-cta {
transition: none
transform: none
}
}
/ MÓVIL: convertir el CTA en bloque de ancho completo si el menú colapsa /
@media (max-width: 768px) {
.main-navigation .menu a.btn-cta {
display: block
width: calc(100% - 2rem) / margen lateral desde el container si es necesario /
margin: 0.5rem auto
text-align: center
}
}
3) Alternativa: apuntar al ítem por ID del menú si no puedes usar clases
WordPress genera clases con el ID del ítem, p. ej. menu-item-123. Puedes usar ese selector para estilizar el enlace.
/ Reemplaza 123 por el ID real de tu item de menú /
.main-navigation li.menu-item-123 > a {
/ copia aquí las reglas del ejemplo anterior /
display: inline-block
padding: 0.6rem 1.1rem
background: #0077cc
color: #fff
border-radius: 24px
}
4) Añadir la clase automáticamente con un pequeño fragmento PHP (opcional)
Si prefieres no tocar el panel o quieres automatizar, copia este snippet en functions.php del child theme o en un plugin de snippets. Reemplaza 123 por el ID del item de menú que quieras convertir en CTA.
/ Añade la clase btn-cta al enlace del item de menú con ID 123 /
add_filter(nav_menu_link_attributes, function(atts, item, args) {
if (isset(item->ID) intval(item->ID) === 123) { // reemplaza 123
if (isset(atts[class])) {
atts[class] .= btn-cta
} else {
atts[class] = btn-cta
}
// Opcional: añadir aria-label si quieres más accesibilidad
// atts[aria-label] = Llamar ahora
}
return atts
}, 10, 3)
5) Accesibilidad y mejores prácticas
- Foco visible: siempre incluye estilos de focus (como en el CSS de ejemplo) para usuarios de teclado.
- Contraste: asegúrate de que el color del texto frente al fondo cumpla con contraste WCAG mínimo (4.5:1 para texto normal). Ajusta colores según necesidad.
- Texto claro: usa una frase concisa que describa la acción (por ejemplo “Reservar”, “Contactar”, “Llamar ahora”).
- En móviles: considera hacer el botón más alto y fácil de tocar (padding aumentado y ancho completo si procede).
- Prefers-reduced-motion: respeta la preferencia para reducir animaciones (ya incluido en el CSS de ejemplo).
6) Personalizaciones avanzadas
- Iconos de fuente: si tu tema ya carga Font Awesome o similar, reemplaza el pseudo-elemento ::before para usar el glyph correspondiente (ej. content: f095 y la font-family adecuada).
- Outline en lugar de fondo: para un estilo más ligero, usa background: transparent border: 2px solid #color color: #color y shadow sutil.
- Animaciones suaves: usa transform: translateY(-2px) y scale(1.02) en hover para realzar pero no exagerar.
- Sticky header: si tu cabecera es fija, añade z-index alto al contenedor y reduce el box-shadow del botón para que se adapte visualmente.
7) Comprobación y solución de problemas
- Si los estilos no se aplican, verifica que el selector coincida con la estructura del HTML generado por tu tema (usa la herramienta Inspeccionar del navegador).
- Si tu theme tiene reglas más específicas, añade más especificidad a tu selector o usa !important de forma muy medida (por ejemplo: .main-navigation .menu a.btn-cta { color:#fff !important }).
- Si el menú móvil reestructura los enlaces en un contenedor distinto, copia las reglas del botón al selector de ese contenedor móvil.
- Si ves transformación o padding distintos, comprueba estilos heredados del tema y sobrescríbelos con reglas claras (display, padding, border-radius, box-shadow).
Ejemplo final: CSS compacto listo para pegar
/ Pegar este bloque y ajustar selectores/colores según tu tema /
.main-navigation .menu a.btn-cta {
display: inline-block
padding: 0.6rem 1rem
background: #ff4b4b
color: #fff
border-radius: 28px
font-weight: 700
text-decoration: none
transition: transform .18s ease, box-shadow .18s ease
}
.main-navigation .menu a.btn-cta:hover,
.main-navigation .menu a.btn-cta:focus {
transform: translateY(-3px)
box-shadow: 0 10px 30px rgba(255,75,75,0.2)
}
@media (max-width:768px) {
.main-navigation .menu a.btn-cta {
display:block width:calc(100% - 2rem) margin:0.5rem auto
}
}
Con estos pasos y ejemplos tienes todo lo necesario para convertir un elemento del menú principal en un botón CTA atractivo, accesible y completamente basado en CSS. Ajusta colores, tamaños y selectores al diseño y HTML de tu tema para obtener el resultado perfecto.
Leave a Reply