Cómo agregar botones fantasma CSS a su tema de WordPress

 

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

Creando botones fantasma con CSS

¿Qué es el botón fantasma?

El botón fantasma es una terminología de diseño web para botones transparentes que se mezclan con el fondo y solo 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 puede agregar sus publicaciones y páginas sin escribir CSS o HTML. Dado que los botones fantasma son una nueva tendencia, no hay complementos especiales para crear botones de estilo fantasma.

Agregar botones fantasma en WordPress

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

Primero, debe agregar el siguiente código CSS a la hoja de estilo de su tema o subtema.

Necesita un cliente FTP para conectarse a su servidor web. Una vez conectado, vaya a la carpeta / wp-content / themes / Your-Theme / y busque el archivo style.css. Abra este archivo para editarlo en un editor de texto y pegue este fragmento de código al final del archivo. (Obtenga más información sobre cómo insertar 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;
}

Guarde sus cambios y vuelva a cargar el archivo en el servidor.

Ahora, si desea mostrar el botón, todo lo que tiene que hacer es agregar class = «Ghost-Button».

Por ejemplo, si desea agregar un enlace de descarga, cree su enlace de descarga como lo haría normalmente. Luego cambie al editor de texto para ver el formato HTML.

Busque el HTML para su enlace de descarga y agregue la clase CSS como esta:

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

Guarde o actualice su publicación y obtenga una vista previa. Verá un bonito botón fantasma en lugar de un simple enlace antiguo.

Esperamos que este artículo le haya ayudado a aprender cómo agregar botones fantasma a su tema de WordPress. También puede consultar nuestra guía sobre cómo agregar botones en WordPress sin usar códigos cortos