Zelf knoppen in WordPress maken is helemaal niet moeilijk

Je zou denken dat knoppen in WordPress maken iets is dat je doet met een plugin of met een thema functie en dat zelf knoppen in WordPress maken zeer moeilijk is. Dit is echter niet het geval, sterker nog zelf knoppen in WordPress maken is makkelijk. Het is heel eenvoudig om met een klein beetje CSS zelf knoppen in WordPress te creëren. Heb je de code eenmaal gemaakt dan is het simpel om overal waar je wil je eigen gemaakte knoppen te plaatsen.

Zelf knoppen in WordPress maken uitleg

Als eerste een link toe aan je site toevoegen:

Maak als eerste een link in een bericht of een pagina zoals je dat normaal zou doen.

Stel we willen een knop met de tekst “Registreer Nu” maken. We voegen dan simpel een link met die tekst toe op een positie die je wil.

 

Nu moet je in de code van je bericht of pagina en een class aan je link toe gaan voegen. Hiervoor zoeken we eerst de link op in de tekst.

 

Vervolgens voegen we een “class” toe aan de link code zoals je hieronder kunt zien. Let er wel op dat je de class een unieke naam geeft zodat er geen conflict is met andere classes die al in je CSS staan.

 

De stijl voor de knop toevoegen:

Nu willen we onze knop een mooi uiterlijk geven. Dit doen we door CSS code toe te voegen. Het beste is om voor dit doel een child thema of een plugin te maken. Zodat de knoppen blijven functioneren ook als het thema een update krijgt. Als je de meest recente versie van WordPress gebruikt heb je hiervoor niet noodzakelijk een child thema nodig. In de customizer zit tegenwoordig de optie om je CSS code aan te passen of code toe te voegen en dit werkt ook prima.

Hieronder zie je de CSS code die ik ga toevoegen ik zal zo uitleggen wat het allemaal betekend.

.mijn-knop: {

  line-height: 1.8em;

  font-size: 25px;

  color: #fff;

  background-color: #3366ff;

  border: 2px solid #3366ff;

  border-radius: 10px;

  padding: 20px 35px;

  -moz-transition: all 0.8s; 

  -webkit-transition: all 0.8s;

  transition: all 0.8s;

}

 

 

a.mijn-knop:hover {

  background-color: #fff;

  color: #3366ff;

  border: 2px solid #3366ff;

  border-radius: 10px;

  padding: 20px 35px;

}

Nu ziet de knop die ik gemaakt heb er als volgt uit:

 

Aanpassen van het uiterlijk van de knop:

Nu kunnen we de code aan eigen smaak aanpassen. Laten we sommige onderdelen even doorlopen.

Het eerste deel van de code bepaalt hoe de knop eruit ziet zonder het hover effect (dat wil zeggen als je met de muisaanwijzer eroverheen gaat).

De line-height geeft de hoogte voor de tekst aan en de font-size is de grootte van de tekst.

De color is de kleur van de tekst. In dit geval begint het wit en veranderd het als je eroverheen gaat met de muis. Dit onderdeel wordt gecontroleerd door het volgende deel van de CSS.

De background color en de border spreken voor zich.

De border-radius geeft de knop een afgeronde uiterlijk. Als je dit verhoogt dan zal de knop ronder worden. Als ik de border-radius verhoog van 10px naar 30 px dan zou de knop er zo uitzien:

 

De padding controleert hoeveel ruimte er is rond de tekst van de knop. Het eerste nummer (20px) geeft aan hoeveel ruimte er boven en onder de tekst is. Het tweede nummer (35px) geeft de ruimte aan de linker- en rechterkant van de tekst aan.

De drie verschillende transitie nummers controleren hoe snel de kleur van de knop veranderd. Hoe hoger dat nummer is hoe langer de transitie duurt. (Er zijn drie verschillende lijnen voor verschillende browsers.)

De hover sectie

De tweede sectie controleerd hoe de knop eruit ziet als je er met de muis overheen gaat. Dit zou duidelijk moeten zijn aan de hand van de informatie hierboven.

Belangrijk om te onthouden is om de kleuren in dit deel te veranderen als je wil dat de kleuren veranderen. In dit voorbeeld ben ik begonnen met een blauwe achtergrond en witte tekst die overgaat naar een witte achtergrond met blauwe tekst.

Op deze manier is zelf knoppen in WordPress maken zeer gemakkelijk. Zodra je de CSS code hebt kun je overal waar je dat wilt een class toevoegen.

Je kunt natuurlijk ook verschillende knoppen maken. Ik zou het overigens zeer leuk vinden om te weten deze methode voor jou ook werkt. Je kan het me laten weten in de reacties onder dit artikel.

Geef een reactie