Cómo agregar botones fantasma CSS en tu tema de WordPress

Recientemente, uno de nuestros lectores nos pidió un tutorial sobre cómo agregar botones fantasma CSS en sus temas de WordPress. Los botones fantasma son botones transparentes de llamada a la acción que son muy populares hoy en día. En este artículo, le mostraremos cómo puede agregar fácilmente botones fantasma CSS en su tema de WordPress utilizando muy poco CSS y HTML.

¿Qué es un botón fantasma?

Un botón fantasma es una terminología de diseño web que se utiliza para botones transparentes que se integran en su fondo y solo son notables por el borde que los rodea.

Crear botones de llamada a la acción normales en WordPress es bastante fácil. Incluso puede agregarlos a sus publicaciones y páginas sin escribir CSS o HTML. Dado que los botones fantasma son una nueva tendencia, no hay complementos específicos para crear solo botones en el estilo fantasma.

Agregar botones fantasma en WordPress

Como se mencionó anteriormente, necesitará usar un poco de CSS y HTML para agregar botones fantasma en su tema de WordPress.

Lo primero que debe hacer es agregar el siguiente código CSS a la hoja de estilos de su tema o tema secundario.

Necesitarás un cliente FTP para conectarte a tu servidor web. Una vez conectado, ve a la carpeta /wp-content/themes/Tu-Tema/ y localiza el archivo style.css. Abre este archivo para editarlo en un editor de texto y luego pega este fragmento de código al final del archivo. (Aprende más sobre pegar fragmentos de código de la web en WordPress).

.ghost-button {
  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;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

Guarda tus cambios y sube el archivo de vuelta al servidor.

Ahora, cada vez que quieras mostrar el botón, todo lo que necesitas hacer es agregar class=\"ghost-button\".

Por ejemplo, si quieres agregar un enlace de descarga, crea tu enlace de descarga como lo harías normalmente. Luego, cambia al editor de texto para ver el formato HTML.

Localiza el código HTML de tu enlace de descarga y agrega la clase CSS de esta manera:

<a href=\"http://example.com/downloads/\" class=\"ghost-button\">Descargar ahora</a>

Guarda o actualiza tu publicación y luego previsualízala. Verás un hermoso botón fantasma en lugar de un enlace simple.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un botón fantasma en tu tema de WordPress. También te puede interesar nuestra guía sobre cómo agregar botones en WordPress sin usar shortcodes

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.