Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere i pulsanti fantasma CSS nel vostro 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 fantasma sono pulsanti trasparenti di invito all’azione che sono molto popolari al giorno d’oggi. In questo articolo, vi mostreremo come potete aggiungere facilmente i pulsanti fantasma CSS nel vostro tema WordPress utilizzando pochissimo CSS e HTML.

Creating Ghost Buttons using CSS

Che cos’è un pulsante fantasma?

Ghost button è una terminologia di web design utilizzata per i pulsanti trasparenti che si confondono con lo sfondo e si notano solo per il bordo che li circonda.

Example of a ghost button next to a normal button

Creare normali pulsanti di invito all’azione in WordPress è abbastanza facile. È possibile aggiungerli ai post e alle pagine senza scrivere CSS o HTML. Poiché i pulsanti fantasma sono una nuova tendenza, non esistono plugin specifici per creare pulsanti in stile fantasma.

Aggiunta di pulsanti fantasma in WordPress

Come accennato in precedenza, per aggiungere i pulsanti fantasma al vostro tema WordPress dovrete usare un po’ di CSS e HTML.

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

Avrete bisogno di un client FTP per connettervi al vostro server web. Una volta connessi, andate nella cartella /wp-content/themes/Your-Theme/ e individuate il file style.css. Aprite questo file per modificarlo in un editor di testo e incollate questo frammento di codice in fondo al file. (Per saperne di più sull’ incollaggio di 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;
}

Salvate le modifiche e caricate il file sul server.

Ora, ogni volta che si vuole visualizzare il pulsante, basta aggiungere class=”ghost-button”.

Ad esempio, se si desidera aggiungere un link per il download, creare il link per il download come si farebbe normalmente. Passare quindi all’editor di testo per vedere la formattazione HTML.

Individuare il codice HTML per il link al download e aggiungere la classe CSS in questo modo:

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

Salvate o aggiornate il vostro post e poi visualizzatelo in anteprima. Vedrete un bel pulsante fantasma al posto del vecchio link.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere un pulsante fantasma nel vostro tema WordPress. Potreste anche voler consultare la nostra guida su come aggiungere pulsanti in WordPress senza utilizzare gli shortcode.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per i video tutorial di WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

5 commentiLascia una risposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. mahmut tanık

    Hi , thanks for great sharings. I’ve researching for a long time.
    How can i add customization button on my wp website ? Customization button i mean see on theme demo sites right or left side there is a button when click you can change theme style or color .

    • WPBeginner Support

      Hi Mahmut,

      In most WordPress themes you can do that by visiting theme’s options page or by visiting Appearance » Customize page in WordPress admin area.

      Admin

  3. Dinesh Fernando

    Thanks, useful code – worked nicely on a live project.

  4. shravan upadhayay

    Great post . thanx for sharing.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.