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 unor butoane de apel la acțiune normale în WordPress este destul de ușoară. Le puteți adăuga chiar și în postările și paginile dvs. fără a scrie CSS sau HTML. Deoarece butoanele ghost sunt o tendință nouă, nu există pluginuri specifice pentru a crea doar butoane în stilul ghost.

Adăugarea Butoanelor Ghost în WordPress

Așa cum am menționat mai devreme, va trebui să folosiți o mică parte de CSS și HTML pentru a adăuga butoane ghost pe tema dvs. 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 dvs. 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 în partea de jos a 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, atunci creați 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 un buton ghost în tema dvs. 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ă v-a plăcut acest articol, vă rugăm să vă abonați la canalul nostru de YouTube pentru tutoriale video WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.