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 agregar fácilmente botones fantasma CSS en su tema de WordPress usando muy pocos CSS y HTML.
¿Qué es el botón fantasma?
Botón fantasma es una terminología de diseño web utilizada para botones transparentes que se mezclan con el fondo y solo son visibles desde el borde que los rodea.
Crear botones de llamada a la acción normales en WordPress es bastante simple. También puede agregarlos a sus publicaciones y páginas sin escribir CSS o HTML. Dado que los botones fantasma son una nueva tendencia, no hay plugins específicos para crear botones de estilo fantasma únicamente.
Agregar botones fantasma en WordPress
Como se mencionó anteriormente, deberá usar algo de CSS y HTML para agregar botones fantasma en su tema de WordPress.
Primero debe agregar el siguiente código CSS a su tema o hoja de estilo de tema hijo.
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, 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 ver 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. A continuación, cambie al editor de texto para ver el formato HTML.
Busque el código HTML para el enlace de descarga y agregue la clase CSS así:
<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 del simple enlace antiguo.
Esperamos que este artículo le haya ayudado a aprender cómo agregar el botón fantasma en su tema de WordPress. También puede consultar nuestra guía sobre cómo agregar botones en WordPress sin usar códigos cortos
¿Te ha resultado útil??
0 / 0