Come aggiungere pulsanti fantasma CSS al tuo tema WordPress

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

Cos'è un pulsante fantasma?

Un pulsante fantasma è una terminologia di web design utilizzata per pulsanti trasparenti che si fondono con il loro sfondo e sono notabili solo per il bordo che li circonda.

Creare normali pulsanti di invito all'azione in WordPress è abbastanza facile. Puoi anche aggiungerli ai tuoi post e pagine senza scrivere CSS o HTML. Poiché i pulsanti ghost sono una nuova tendenza, non esistono plugin specifici per creare solo pulsanti nello stile ghost.

Aggiungere pulsanti fantasma in WordPress

Come accennato in precedenza, dovrai utilizzare un pizzico di CSS e HTML per aggiungere pulsanti ghost al tuo tema WordPress.

La prima cosa da fare è aggiungere il seguente codice CSS al foglio di stile del tuo tema o tema child.

Avrai bisogno di un client FTP per connetterti al tuo server web. Una volta connesso, vai alla cartella /wp-content/themes/Il-tuo-tema/ e individua il file style.css. Apri questo file per modificarlo in un editor di testo e poi incolla questo snippet di codice in fondo al file. (Scopri di più su come incollare snippet di codice dal web in 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;
}

Salva le modifiche e carica nuovamente il file sul server.

Ora ogni volta che vorrai visualizzare il pulsante, tutto ciò che dovrai fare è aggiungere class=”ghost-button”.

Ad esempio, se vuoi aggiungere un link per il download, crea il tuo link per il download come faresti normalmente. Successivamente, passa all'editor di testo per vedere la formattazione HTML.

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

<a href="http://example.com/downloads/" class="ghost-button">Scarica ora</a>

Salva o aggiorna il tuo post e poi visualizzalo in anteprima. Vedrai un bellissimo pulsante fantasma invece di un semplice link.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere pulsanti ghost nel tuo tema WordPress. Potresti anche voler consultare la nostra guida su come aggiungere pulsanti in WordPress senza usare shortcode.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.