Cómo agregar botones de CSS Ghost en tu tema de WordPress

Recientemente, uno de nuestros lectores nos pidió un tutorial sobre cómo agregar botones de 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 de 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 los botones transparentes que se mezclan en su fondo y solo se notan por el borde alrededor.

Crear botones normales de llamada a la acción en WordPress es bastante fácil. Incluso puedes agregarles tus 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.

Añadiendo botones fantasma en WordPress

Como se mencionó anteriormente, necesitarás usar un poco de CSS y HTML para agregar botones fantasma en tu 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 infantil.

Necesitará un cliente FTP para conectarse a su servidor web. Una vez conectado, vaya a / wp-content / themes / Your-Theme / folder y localice 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).

 .botón fantasma pantalla: bloque en línea; ancho: 200px; relleno: 8px; color: #fff; borde: 2px sólido #fff; text-align: center; esquema: ninguno; texto-decoración: ninguno; transición: fondo-color 0.2s facilidad de salida, color 0.2s facilidad de salida;  .ghost-button: hover, .ghost-button: active background-color: #fff; color: # 000; transición: fondo-color 0.3s facilidad, color 0.3s facilidad-en;  

Guarda tus cambios y sube el archivo al servidor.

Ahora, cuando quiera 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.

Localice el código HTML para su enlace de descarga y agregue la clase CSS de esta manera:

Descargar ahora

Guarda o actualiza tu publicación y luego haz una vista previa. Verás un hermoso botón fantasma en lugar de un enlace simple y antiguo.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un botón fantasma en tu tema de WordPress. También puede querer ver nuestra guía sobre cómo agregar botones en WordPress sin usar códigos cortos

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..