Så här lägger du till CSS Ghost-knappar i ditt WordPress-tema

Nyligen frågade en av våra läsare oss om en handledning om hur man lägger till CSS Ghost-knappar i sina WordPress-teman. Ghostknappar är de genomskinliga anropsknapparna som är väldigt populära idag. I den här artikeln kommer vi att visa dig hur du enkelt kan lägga till CSS-spökknappar i ditt WordPress-tema med hjälp av mycket lite CSS och HTML.

Vad är Ghost Button?

Ghost-knappen är en webbdesignterminologi som används för transparenta knappar som blandar sig i deras bakgrund och är bara märkbara av gränsen runt dem.

Skapa enkla anropsknappar i WordPress är ganska enkelt. Du kan till och med lägga till dina inlägg och sidor utan att skriva CSS eller HTML. Eftersom spökknappar är en ny trend finns inga specifika plugins för att skapa bara knappar i spökstilen.

Lägga till Ghost Buttons i WordPress

Som tidigare nämnts måste du använda en liten bit av CSS och HTML för att lägga till spökknappar på ditt WordPress-tema.

Först måste du lägga till följande CSS-kod till ditt tema eller barntema stilark.

Du behöver en FTP-klient för att ansluta till din webbserver. När du är ansluten, gå till / wp-innehåll / teman / Din-Tema / mapp och leta efter style.css-filen. Öppna den här filen för att redigera i en textredigerare och klistra in den här kodfliken längst ner i filen. (Läs mer om att klistra in kodutdrag från webben i WordPress).

 .spökknapp display: inline-block; bredd: 200px; vaddering: 8px; färg: #fff; gränsen: 2px solid #fff; text-align: center; kontur: ingen; text-dekoration: ingen; Övergång: Bakgrundsfärg 0.2s Lättnad, Färg 0.2s Lättnad;  .ghost-knapp: svep, .ghost-knapp: aktiv bakgrundsfärg: #fff; färg: # 000; övergång: bakgrundsfärg 0.3s inlämning, färg 0.3s inlämning;  

Spara dina ändringar och ladda upp filen tillbaka till servern.

Nu när du vill visa knappen behöver du bara lägga till class = "spook-button".

Om du till exempel vill lägga till en hämtningslänk skapar du din hämtningslänk som du normalt gör. Byt sedan till textredigeraren för att se HTML-formateringen.

Leta reda på HTML-koden för din nedladdningslänk och lägg till CSS-klassen så här:

Ladda ner nu

Spara eller uppdatera ditt inlägg och förhandsgranska det. Du kommer att se en vacker spökknapp istället för att släppa en gammal länk.

Vi hoppas att den här artikeln hjälper dig att lära dig hur du lägger till spökningsknapp i ditt WordPress-tema. Du kanske också vill se vår guide om hur du lägger till knappar i WordPress utan att använda kortkoder

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.