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?
Contents
El botón fantasma es terminología de diseño web que se utiliza para botones transparentes que se mezclan con su fondo y solo son visibles por el borde que los rodea.
Crear botones de llamada a la acción normales en WordPress es bastante fácil. Incluso puede agregar 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 a su tema de WordPress. Primero, debe agregar el siguiente código CSS a su tema oa la hoja de estilo de su tema hijo. Necesitará un cliente FTP para conectarse a su servidor web. Una vez que haya iniciado sesión, 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 la web en WordPress). .ghost-button {display: inline-block; ancho: 200px; relleno: 8px; color: #fff; borde: 2px sólido #fff; alineación de texto: centro; esquema: ninguno; decoración de texto: ninguna; transición: el color de fondo se desvanece 0.2s, el color se desvanece 0.2s; } .botón fantasma: desplazarse, .botón fantasma: activo {color de fondo: #fff; color: # 000; transición: facilidad de entrada en color de fondo de 0,3 s, facilidad de entrada en color de 0,3 s; } Guarde sus cambios y cargue el archivo en el servidor. Ahora, cuando quiera mostrar el botón, solo necesita agregar class = «ghost-button». Por ejemplo, si desea agregar un enlace de descarga, cree su enlace de descarga como lo haría normalmente. Luego, vaya al editor de texto para ver el formato HTML. Busque el código HTML para su enlace de descarga y agregue la clase CSS de esta manera: Descargar ahora Guarde o actualice su publicación, luego obtenga una vista previa. Verá un hermoso botón fantasma en lugar de un enlace antiguo. 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 cortos. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 18:58:28.
