Cum se adaugă 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 Ghost în temele lor WordPress. Butoanele Ghost sunt butoanele transparente de apel pentru acțiune care sunt foarte populare în aceste zile. În acest articol, vă vom arăta cum puteți adăuga cu ușurință butoane CSS fantomă în tema WordPress utilizând foarte puțin CSS și HTML.

Ce este Ghost Button?

Butonul Ghost este o terminologie de design web utilizată pentru butoanele transparente care se amestecă în fundal și sunt vizibile doar de granița din jurul lor.

Crearea butoanelor normale de apel în acțiune în WordPress este destul de ușoară. Puteți chiar să le adăugați postările și paginile fără a scrie CSS sau HTML. Deoarece butoanele fantomă sunt o nouă tendință, nu există pluginuri specifice pentru a crea doar butoane în stilul fantomă.

Adăugarea butoanelor Ghost în WordPress

Așa cum am menționat mai devreme, va trebui să folosiți un pic de CSS și HTML pentru a adăuga butoane fantomă pe tema WordPress.

Mai întâi trebuie să adăugați următorul cod CSS la foaia de stil a temei sau a temei copilului.

Veți avea nevoie de un client FTP pentru a vă conecta la serverul dvs. web. După conectare, accesați / wp-content / themes / Your-Theme / folder și localizați fișierul style.css. Deschideți acest fișier pentru a 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 inserarea fragmentelor de cod de pe web în WordPress).

 .buton fantomă display: inline-block; lățime: 200px; padding: 8px; culoare: #fff; frontieră: 2px solid #fff; text-align: centru; contur: nici unul; text-decoration: nici unul; tranziție: culoarea de fundal 0,2 secunde, culoarea 0,2 secunde;  .ghost-buton: hover, .ghost-button: activ background-color: #fff; culoare: # 000; tranziție: culoarea de fundal 0.3s ușurință în utilizare, culoare 0.3s ușurință;  

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 clasa = "ghost-button".

De exemplu, dacă doriți să adăugați un link de descărcare, creați apoi linkul de descărcare așa cum ați proceda în mod normal. Apoi treceți la editorul Text pentru a vedea formatul HTML.

Găsiți codul HTML pentru link-ul de descărcare și adăugați clasa CSS astfel:

Descarcă acum

Salvați sau actualizați postarea și apoi previzualizați-o. Veți vedea un buton fantomatic frumos în loc de legătură veche simplu.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați butonul fantomă în tema WordPress. De asemenea, puteți dori să vedeți ghidul nostru despre cum să adăugați butoane în WordPress fără a utiliza coduri scurte

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.