Recientemente, uno de nuestros lectores nos pidió un tutorial sobre cómo agregar 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 en estos días. En este artículo, le mostraremos cómo puede agregar fácilmente botones fantasma CSS en su tema de WordPress usando muy poco CSS y HTML.
¿Qué es el botón fantasma?
El botón fantasma es una terminología de diseño web utilizada para botones transparentes que se mezclan con su fondo y solo se notan por el borde que los rodea.
Crear botones de llamada a la acción normales en WordPress es bastante fácil. Incluso puede agregarles 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, deberá 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 estilo de su tema o tema secundario.
Necesitará 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 luego pegue este fragmento de código en la parte inferior del archivo. (Obtenga 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; }
Guarde sus cambios y vuelva a cargar el archivo en el servidor.
Ahora, siempre que desee mostrar el botón, todo lo que necesita 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. A continuación, cambie al editor de texto para ver el formato HTML.
Busque el código 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 luego obtenga una vista previa. Verá un hermoso botón fantasma en lugar de un simple enlace antiguo.
Esperamos que este artículo le haya ayudado a aprender cómo agregar un botón fantasma en su tema de WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar botones en WordPress sin usar códigos cortos