fbpx

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

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

Nos encanta recomendar el mejor contenido, por eso no te pierdas el siguiente artículo de Fernando Tellado y no dejes de visitar su página!
Ver Original:

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.

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: botontransparente

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…

(1 votos, promedio: 5)

¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Compartir este post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *