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

Texto del botón

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.

La entrada Cómo crear un botón transparente fácilmente sin plugins la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero

Copywriter, Redactora de Content SEO.
Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

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