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
¿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
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.
Deja un comentario
¡Más Contenido!