Cómo añadir botones fantasma CSS en tu tema de WordPress

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

Creación de botones fantasma con CSS

¿Qué es el botón fantasma?

El botón fantasma es una terminología de diseño web que se utiliza para los botones transparentes que se funden con el fondo y sólo se notan por el borde que los rodea

Ejemplo de un botón fantasma junto a un botón normal

Crear botones de llamada a la acción normales en WordPress es bastante fácil. Incluso puedes añadirlos a tus entradas y páginas sin necesidad de escribir CSS o HTML. Como los botones fantasma son una nueva tendencia, no hay plugins específicos para crear sólo botones de estilo fantasma

Añadir botones fantasma en WordPress

Como se ha mencionado anteriormente, tendrás que utilizar un poco de CSS y HTML para añadir botones fantasma en tu tema de WordPress

Lo primero que tienes que hacer es añadir el siguiente código CSS a la hoja de estilos de tu tema o tema hijo

Necesitarás un cliente FTP para conectarte a tu servidor web. Una vez conectado, ve a la carpeta /wp-content/themes/Your-Theme/ y localiza el archivo style.css. Abre este archivo para editarlo en un editor de texto y luego pega este fragmento de código en la parte inferior del archivo. (Más información sobre cómo 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 los cambios y sube el archivo al servidor

Ahora, cuando quieras mostrar el botón, sólo tienes que añadir class="ghost-button"

Por ejemplo, si quieres añadir un enlace de descarga, crea tu enlace de descarga como harías normalmente. A continuación, cambia al editor de texto para ver el formato HTML

Localiza el código HTML de tu enlace de descarga y añade la clase CSS así

<a href="http://example.com/downloads/" class="ghost-button">Download Now</a>

Guarda o actualiza tu post y luego previsualízalo. Verás un bonito botón fantasma en lugar de un simple enlace

Esperamos que este artículo te haya ayudado a aprender cómo añadir un botón fantasma en tu tema de WordPress. Quizás también quieras ver nuestra guía sobre cómo añadir botones en WordPress sin usar shortcodes

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo añadir botones fantasma CSS en tu tema de WordPress puedes visitar la categoría Themes.

¡Más Contenido!

Deja un comentario

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

Go up