CSS Ghost-knoppen toevoegen aan uw WordPress-thema

Onlangs vroeg een van onze lezers ons om een ​​tutorial over hoe CSS Ghost-knoppen kunnen worden toegevoegd aan hun WordPress-thema's. Ghostknoppen zijn de transparante call-to-action-knoppen die tegenwoordig erg populair zijn. In dit artikel laten we u zien hoe u gemakkelijk CSS-ghost-knoppen in uw WordPress-thema kunt toevoegen met heel weinig CSS en HTML.

Wat is Ghost Button?

Ghost-knop is een webontwerpterminologie die wordt gebruikt voor transparante knoppen die opgaan in hun achtergrond en alleen zichtbaar zijn door de rand eromheen.

Het maken van normale call to action-knoppen in WordPress is vrij eenvoudig. U kunt zelfs uw berichten en pagina's toevoegen zonder CSS of HTML te schrijven. Omdat Ghost-knoppen een nieuwe trend zijn, zijn er geen specifieke plug-ins om alleen maar knoppen in de Ghost-stijl te maken.

Geestknoppen toevoegen in WordPress

Zoals eerder vermeld, moet je een klein beetje CSS en HTML gebruiken om Ghost-knoppen toe te voegen aan je WordPress-thema.

Eerst moet je de volgende CSS-code toevoegen aan de stylesheet van je thema of kindthema.

U hebt een FTP-client nodig om verbinding te maken met uw webserver. Eenmaal verbonden, ga naar / wp-content / themes / Your-Theme / folder en zoek het style.css-bestand. Open dit bestand om te bewerken in een teksteditor en plak dit codefragment onder aan het bestand. (Meer informatie over het plakken van codefragmenten van internet in WordPress).

 .ghost-knop display: inline-block; breedte: 200 px; opvulling: 8px; kleur: #fff; border: 2px solid #fff; text-align: center; overzicht: geen; tekstdecoratie: geen; overgang: achtergrond-kleur 0,2s gemak, kleur 0,2s gemak;  .ghost-button: hover, .ghost-button: active background-colour: #fff; kleur: # 000; overgang: 0,3-inch achtergrondkleur met gemak, 0,3s gebruiksgemak in kleur;  

Sla uw wijzigingen op en upload het bestand naar de server.

Als u nu de knop wilt weergeven, hoeft u alleen maar class = "ghost-button" toe te voegen.

Als u bijvoorbeeld een downloadkoppeling wilt toevoegen, maakt u uw downloadkoppeling zoals u dat normaal zou doen. Schakel vervolgens over naar de teksteditor om de HTML-opmaak te zien.

Zoek de HTML-code voor uw downloadkoppeling en voeg de CSS-klasse als volgt toe:

Download nu

Sla uw bericht op of werk het bij en bekijk er een voorbeeld van. Je ziet een mooie ghost-knop in plaats van een gewone oude link.

We hopen dat dit artikel je heeft geholpen om te leren hoe je Ghost Button kunt toevoegen aan je WordPress-thema. Wellicht wilt u ook onze handleiding over het toevoegen van knoppen in WordPress zien zonder shortcodes te gebruiken

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.