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 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 mezclan con el fondo y solo se reconocen por el borde que los rodea.
Crear botones de llamada a la acción normales en WordPress es bastante simple. Incluso puede agregarlos a 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 de estilo fantasma.
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 al tema de su hijo o a la hoja de estilo.
Necesitará un cliente FTP para conectarse a su servidor web. Una vez conectado, vaya a la carpeta /wp-content/themes/Your-Theme/ y localice 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, cada vez que desee que aparezca el botón, todo lo que tiene que hacer es agregar class = “ghost-button”.
Por ejemplo, si desea agregar un enlace de descarga, cree el enlace de descarga como lo haría normalmente. Luego, cambie al editor de texto para ver el formato HTML.
Localice el código HTML para el enlace de descarga y agregue la clase CSS de la siguiente manera:
<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 antiguo enlace simple.
Esperamos que este artículo le haya ayudado a aprender cómo agregar un 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 abreviados
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
Cómo agregar botones Ghost CSS en su tema de WordPress
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 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 mezclan con el fondo y solo se reconocen por el borde que los rodea.
Crear botones de llamada a la acción normales en WordPress es bastante simple. Incluso puede agregarlos a 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 de estilo fantasma.
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 al tema de su hijo o a la hoja de estilo.
Necesitará un cliente FTP para conectarse a su servidor web. Una vez conectado, vaya a la carpeta /wp-content/themes/Your-Theme/ y localice 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, cada vez que desee que aparezca el botón, todo lo que tiene que hacer es agregar class = “ghost-button”.
Por ejemplo, si desea agregar un enlace de descarga, cree el enlace de descarga como lo haría normalmente. Luego, cambie al editor de texto para ver el formato HTML.
Localice el código HTML para el enlace de descarga y agregue la clase CSS de la siguiente manera:
<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 antiguo enlace simple.
Esperamos que este artículo le haya ayudado a aprender cómo agregar un 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 abreviados
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
