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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
mahmut tanık says
Hi , thanks for great sharings. I’ve researching for a long time.
How can i add customization button on my wp website ? Customization button i mean see on theme demo sites right or left side there is a button when click you can change theme style or color .
WPBeginner Support says
Hi Mahmut,
In most WordPress themes you can do that by visiting theme’s options page or by visiting Appearance » Customize page in WordPress admin area.
Administratör
Dinesh Fernando says
Thanks, useful code – worked nicely on a live project.
shravan upadhayay says
Great post . thanx for sharing.