Slik legger du til CSS Ghost Buttons i WordPress Theme

Nylig spurte en av våre lesere oss om en veiledning om hvordan du legger til CSS Ghost-knapper i deres WordPress-temaer. Ghost-knapper er de gjennomsiktige handlingsknappene som er svært populære i disse dager. I denne artikkelen vil vi vise deg hvordan du enkelt kan legge til CSS spøkelsesknapper i WordPress-temaet ditt ved å bruke svært lite CSS og HTML.

Hva er Ghost Button?

Ghost-knappen er en webdesign-terminologi som brukes til gjennomsiktige knapper som blander seg i bakgrunnen, og er kun merkbare av grensen rundt dem.

Å lage vanlige oppringningsknapper i WordPress er ganske enkelt. Du kan til og med legge til dine innlegg og sider uten å skrive CSS eller HTML. Siden spøkelsesknapper er en ny trend, er det ingen spesifikke plugins for å lage bare knapper i spøkelsesstilen.

Legge til Ghost Buttons i WordPress

Som nevnt tidligere må du bruke en liten bit av CSS og HTML for å legge til spøkelsesknapper på WordPress-temaet.

Først må du gjøre å legge til følgende CSS-kode til temaet eller temaet ditt stilark.

Du trenger en FTP-klient for å koble til webserveren din. Når du er koblet til, gå til / wp-innhold / temaer / Din-Tema / mappe og finn style.css-filen. Åpne denne filen for å redigere i et tekstredigeringsprogram, og lim deretter inn dette kodestykket nederst på filen. (Lær mer om å lime inn kodestykker fra nettet i WordPress).

 .spøkelsesknapp display: inline-block; bredde: 200px; polstring: 8px; farge: #fff; grense: 2px solid #fff; tekst-align: center; oversikt: ingen; tekst-dekorasjon: ingen; overgang: bakgrunnsfarge 0.2s utelukkelse, farge 0.2s utelukkelse;  .ghost-knapp: svever, .ghost-knapp: aktiv bakgrunnsfarve: #fff; farge: # 000; overgang: bakgrunnsfarge 0,3s brukervennlighet, farge 0,3s brukervennlighet;  

Lagre endringene dine og last opp filen tilbake til serveren.

Nå når du vil vise knappen alt du trenger å gjøre er å legge til klasse = "spøkelses-knappen".

Hvis du for eksempel vil legge til en nedlastingskobling, lager du nedlastingskoblingen som du normalt ville gjøre. Deretter bytter du til tekstredigereren for å se HTML-formatering.

Finn HTML-koden for nedlastingskoblingen din og legg til CSS-klassen slik:

Last ned nå

Lagre eller oppdatere innlegget ditt og forhåndsvise det. Du vil se en vakker spøkelseknapp i stedet for å slette gammel lenke.

Vi håper denne artikkelen hjalp deg med å lære hvordan du legger til spøkelsesknappen i WordPress-temaet ditt. Du vil kanskje også se vår guide om hvordan du legger til knapper i WordPress uten å bruke kortkoder

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.