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 call to action in WordPress è abbastanza facile. Puoi anche aggiungerli ai tuoi 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 in stile fantasma.

Aggiungere pulsanti fantasma in WordPress

Come accennato in precedenza, dovrai utilizzare un pizzico di CSS e HTML per aggiungere pulsanti fantasma sul 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 un pulsante fantasma 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.