Så här addar du CSS Ghost-knappar i ditt tema i WordPress

Nyligen bad en av våra Läsare oss om en tutorial om hur man lägger till CSS Ghost knappar i deras WordPress teman. Ghost-knappar är de transparenta call-to-action-knappar som är mycket populära idag. I den här artikeln kommer vi att visa dig hur du enkelt kan add to CSS ghost knappar i din WordPress tema med hjälp av mycket lite CSS och HTML.

Vad är en spökknapp?

Ghost button är en terminologi för webbdesign som används för transparenta knappar som smälter in i bakgrunden och endast är notice genom ramen runt dem.

Att skapa normala call-to-action-knappar i WordPress är ganska enkelt. Du kan till och med add to dem till dina posts och pages utan att skriva CSS eller HTML. Eftersom spökknappar är en new trend finns det inga specifika tillägg för att skapa just knappar i spökstil.

Lägga till spökknappar i WordPress

Som nämnts tidigare måste du använda lite CSS och HTML för att lägga till spökknappar på ditt WordPress theme.

Det första du behöver göra är att add to följande CSS-kod till ditt temas eller barntemas stylesheet.

Du behöver en FTP-klient för att ansluta till din web server. När du är ansluten går du till /wp-content/themes/Your-Theme/ folder och lokaliserar filen style.css. Öppna den här filen för att edit i en textredigerare och klistra sedan in det här code snippet längst ner i filen. (Läs mer om hur du klistrar in code snippets 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;
}

Save your changes and upload the file back to the server.

Nu när du vill visa knappen allt du behöver göra är att add to class=”ghost-button”.

Om du till exempel vill add to en download link, så skapar du din download link som du normalt skulle göra. Byt sedan till textredigeraren för att se HTML-formateringen.

Locate the HTML code for your download link and add the CSS class like this:

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

Save eller update din post och sedan preview den. You will see a beautiful ghost button instead of plain old link.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en spökknapp 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 shortcodes

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