Come aggiungere i pulsanti CSS Ghost nel tema WordPress

Recentemente uno dei nostri lettori ci ha chiesto un tutorial su come aggiungere i pulsanti CSS Ghost nei loro temi WordPress. I pulsanti Ghost sono i pulsanti di invito all'azione trasparenti che sono molto popolari in questi giorni. In questo articolo, ti mostreremo come puoi facilmente aggiungere pulsanti fantasma CSS nel tuo tema WordPress usando pochissimo CSS e HTML.

Cos'è il pulsante Ghost?

Il pulsante Ghost è una terminologia del web design utilizzata per i pulsanti trasparenti che si fondono con il loro sfondo e sono visibili solo dal bordo che li circonda.

Creare normali pulsanti call to action in WordPress è abbastanza semplice. Puoi persino aggiungere loro post e pagine senza scrivere CSS o HTML. Poiché i pulsanti fantasma sono una nuova tendenza, non ci sono plugin specifici per creare solo pulsanti nello stile fantasma.

Aggiunta di pulsanti Ghost in WordPress

Come accennato in precedenza, sarà necessario utilizzare un po 'di CSS e HTML per aggiungere pulsanti fantasma sul tema WordPress.

Per prima cosa devi aggiungere il seguente codice CSS al tuo foglio di stile del tema del tema o del bambino.

Avrai bisogno di un client FTP per connetterti al tuo web server. Una volta connesso, vai su / wp-content / themes / Your-Theme / folder e individua il file style.css. Apri questo file per modificarlo in un editor di testo e quindi incolla questo snippet di codice nella parte inferiore del file. (Ulteriori informazioni su come incollare snippet di codice dal Web in WordPress).

 .pulsante fantasma display: blocco in linea; larghezza: 200 px; imbottitura: 8px; colore: #fff; border: 2px solid #fff; allineamento del testo: centro; contorni: nessuno; decorazione del testo: nessuna; transizione: distacco colore di sfondo-colore 0.2s, distacco colore 0.2s;  Pulsante .ghost: hover, .ghost-button: active background-color: #fff; colore: # 000; transizione: easy-in 0.3s dello sfondo-colore, facilità d'inserimento del colore 0.3s;  

Salva le tue modifiche e carica il file sul server.

Ora ogni volta che vuoi visualizzare il pulsante tutto ciò che devi fare è aggiungere class = "ghost-button".

Ad esempio, se si desidera aggiungere un collegamento per il download, creare il collegamento per il download come si farebbe normalmente. Quindi, passa all'editor di testo per vedere la formattazione HTML.

Individua il codice HTML per il tuo link per il download e aggiungi la classe CSS in questo modo:

Scarica ora

Salva o aggiorna il tuo post e quindi visualizzalo in anteprima. Vedrai un bellissimo pulsante fantasma invece del semplice vecchio link.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere il pulsante fantasma nel tuo tema WordPress. Potresti anche voler vedere la nostra guida su come aggiungere pulsanti in WordPress senza utilizzare gli shortcode

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.