Cum să adăugați butoane Ghost CSS în tema WordPress

Recent, unul dintre cititorii noștri ne-a cerut un tutorial despre cum să adăugăm butoane Ghost CSS în temele WordPress. Butoanele Ghost sunt butoane transparente de tip call to action, foarte populare în zilele noastre. În acest articol, vă vom arăta cum puteți adăuga cu ușurință butoane Ghost CSS în tema WordPress folosind foarte puțin CSS și HTML.

Ce este un buton Ghost?

Butonul Ghost este o terminologie de design web folosită pentru butoanele transparente care se integrează în fundalul lor și sunt vizibile doar prin chenarul din jurul lor.

Crearea de butoane de tip call to action normale în WordPress este destul de ușoară. Le poți adăuga chiar și în postările și paginile tale fără a scrie CSS sau HTML. Deoarece butoanele ghost sunt o tendință nouă, nu există pluginuri specifice pentru a crea doar butoane în stil ghost.

Adăugarea Butoanelor Ghost în WordPress

Așa cum am menționat anterior, va trebui să folosiți puțin CSS și HTML pentru a adăuga butoane fantomă pe tema dumneavoastră WordPress.

Primul lucru pe care trebuie să-l faceți este să adăugați următorul cod CSS la fișierul stylesheet al temei sau al temei copil.

Veți avea nevoie de un client FTP pentru a vă conecta la serverul web. Odată conectat, accesați folderul /wp-content/themes/Your-Theme/ și localizați fișierul style.css. Deschideți acest fișier pentru a-l edita într-un editor de text și apoi lipiți acest fragment de cod la sfârșitul fișierului. (Aflați mai multe despre lipirea fragmentelor de cod de pe web în 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ți modificările și încărcați fișierul înapoi pe server.

Acum, ori de câte ori doriți să afișați butonul, tot ce trebuie să faceți este să adăugați class=”ghost-button”.

De exemplu, dacă doriți să adăugați un link de descărcare, creați-vă linkul de descărcare așa cum ați face în mod normal. Apoi, comutați la editorul de text pentru a vedea formatarea HTML.

Localizează codul HTML pentru linkul tău de descărcare și adaugă clasa CSS astfel:

<a href="http://example.com/downloads/" class="ghost-button">Descărcați acum</a>

Salvează sau actualizează postarea și apoi previzualizeaz-o. Vei vedea un buton ghost frumos în locul unui simplu link vechi.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați butoane fantomă în tema dumneavoastră WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați butoane în WordPress fără a folosi shortcode-uri

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.