Hur man lägger 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. Ghost-knappar är de transparenta uppmaningsknapparna som är mycket populära nuförtiden. I den här artikeln visar vi hur du enkelt kan lägga till CSS Ghost-knappar i ditt WordPress-tema med väldigt lite CSS och HTML.

Vad är en Ghost-knapp?

Ghost-knapp är en terminologi inom webbdesign som används för transparenta knappar som smälter in i sin bakgrund och endast märks genom kanten runt dem.

Att skapa vanliga call to action-knappar i WordPress är ganska enkelt. Du kan till och med lägga till dem i dina inlägg och sidor utan att skriva CSS eller HTML. Eftersom spökknappar är en ny trend finns det inga specifika plugins för att bara skapa knappar i spökstil.

Lägga till spökknappar i WordPress

Som nämnts tidigare behöver du använda lite CSS och HTML för att lägga till spökknappar på ditt WordPress-tema.

Först behöver du lägga till följande CSS-kod i ditt tema eller ditt barns tema-stilmall.

Du behöver en FTP-klient för att ansluta till din webbserver. När du är ansluten, gå till mappen /wp-content/themes/Ditt-Tema/ och leta upp filen style.css. Öppna den här filen för att redigera i en textredigerare och klistra sedan in det här kodavsnittet längst ner i filen. (Läs mer om att klistra in kodavsnitt från webben i 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;
}

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

Om du till exempel vill lägga till en nedladdningslänk, skapa din nedladdningslänk som du normalt skulle göra. 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:

<a href="http://example.com/downloads/" class="ghost-button">Ladda ner nu</a>

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

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

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