Cómo crear un botón transparente fácilmente sin plugins

Por si no caes, los botones transparentes, también conocidos (en inglés) como ghost buttons, son uno de los elementos de diseño más utilizados habitualmente en páginas de todo tipo. Las estás viendo a diario.

Los ves en páginas de destino, landings, venta, en todas partes.

Y, al contrario de lo que podrías creer, no necesitas instalar un tema supervitaminado ni ningún plugin para crear este tipo de botones, solo tu WordPress y un poquito de CSS.

Crea el CSS base

Lo primero es abrir  Personalizador > CSS Adicional de tu WordPress y añadir este código:

Guarda los cambios y ya tienes una base para empezar a probar los botones  transparentes.

Por supuesto, los colores, bordes, fondos y demás los puedes poner a tu gusto, modificando el CSS que te propongo.

Aplica el CSS a tus enlaces, menús, en todas partes

Llegados a este punto solo tienes que aplicar la nueva clase CSS a todo aquél elemento que quieras convertir en un botón transparente.

Y lo mejor de todo es que WordPress nos lo pone muy fácil.

En todos los bloques del editor tienes una pestaña de ajustes llamada «Avanzado» en la que puedes añadir una clase CSS adicional, y ahí es donde deberás añadir la que acabamos de crear: boton-transparente

Si usas el editor clásico tendrás que añadirla manualmente al HTML, tal que así:

El resultado en todos los casos será que tu texto se convertirá en un bonito botón que cambia al pasar el cursor sobre él.

¿Sabes lo mejor de esto? Que también puedes usarlo en los menús de tu WordPress, pues también tienes una casilla para insertar clases CSS adicionales.

Solo tienes que activar primero la casilla, que no es visible por defecto, así:

Y ya puedes editar cualquier elemento de tu menú para añadirle la clase CSS que lo convertirá en un botón transparente…

Y ya lo tienes…

Como has podido ver, una funcionalidad muy práctica a la vez que fácil de conseguir, solo tienes que seguir estos pasos, y personalizar tus botones transparentes a tu gusto.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(7 votos, promedio: 4.3)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido