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:

.boton-transparente {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.boton-transparente:hover,
.boton-transparente:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

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

<a class="boton-transparente" href="https://enlace-del-boton.com">Texto del botón</a>

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? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

2 comentarios en “Cómo crear un botón transparente fácilmente sin plugins”

  1. Hola Fernando, buenos días.

    Parece que en la clase .boton-transparente no está definida la propiedad background-color: transparent o none, por lo cual heredará las propiedades de a o button, cuyo fondo no tiene porqué ser transparente (especialmente button)

    Saludos.

Deja un comentario

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

 

Ir arriba Ir al contenido