Zelf buttons maken in WordPress met een HTML Class en CSS

Logo cursus traing wordpress

Zelf buttons maken in WordPress met een HTML Class en CSS

Door /

Je kan zelf buttons maken die los staan van een of plugin. Bekijk in deze handleiding hoe je call-to-action buttons maakt voor je WordPress website.

Waarom buttons toevoegen aan je WordPress website

De WordPress Editor () heeft eigenlijk geen mogelijkheid om buttons of knoppen toe te voegen aan je berichten of pagina's. Er zijn veel situaties waarin je een button nodig hebt in een bericht of op een pagina. Een voorbeeld is een call-to-action knop of een demo / download-knop in plaats van een tekstlink.

3 manieren om buttons te maken

Hieronder vind je 3 manieren om buttons te maken voor je WordPress website. De laatste optie vind ik het best en deze heb ik verder uitgelegd.

Buttons maken met een thema

De meeste uitgebreide thema's worden al geleverd met stijlvolle knoppen om zelf toe te voegen. Je kan deze buttons gebruiken. Ik ben zelf geen voorstander van deze optie, omdat je dan vastzit aan het thema. Als je een ander thema kiest, dan ben je je buttons kwijt. Hieronder een lijstje met thema's waar buttons ingebouwd zitten en die je standaard kunt gebruiken:

Buttons maken met een page builder plugin

Je kunt een plug-in gebruiken om buttons toe tevoegen.

Zelf buttons maken zonder een plugin met html

Je kan zelf call-to-action buttons maken die los staan van een WordPress thema of plugin. Zodoende ben je heel flexibel. Dit is cruciaal voor de strategie voor je website op lange termijn. Lees dit artikel als je hierover meer wilt weten:
Strategie en eisen voor je WordPress thema

Buttons maken met html in WordPress

Je kunt classes (stijlen) toevoegen in het aanvullende CSS-menu van WordPress en hiernaar verwijzen om knoppen toe te voegen. In je CSS van je thema zet je de code voor een button. In de CSS zet je ook zogenaamde classes. Een ‘' is een of stijl voor je buttons. Hieronder leg ik uitgebreid uit hoe je dit doet. Hoe de CSS eruit ziet leer je tijdens één van de cursussen waarbij we uitgebreid ingaan op het ontwerp van je website:

Hoe maak je zelf buttons voor je WordPress website?

Een HTML-button ziet er standaard lelijk uit:



In HTML ziet dit er zo uit:
<button>Dit is een standaard button in HTML</button><br />

Door zelf een ‘class' toe te voegen kun je perfecte call-to-action buttons maken. Hieronder leg ik uit hoe je dit doet. Tijdens de WordPress cursus krijg je een uitgereikt waarbij je alleen maar hoeft te kopieren en plakken in de CSS van je WordPress thema. Dit werkt heel eenvoudig. Je hoeft allen maar ‘class=”jouw eigen stijl”‘ toe te voegen binnen de button code. Je kan de naam van de class uiteraard zelf aanpassen. Dit ziet er dan zo uit:

<button class="button jouw eigen stijl">Dit is button in je eigen stijl</button><br />

Je button kan er dan zo uitzien:

Voorbeelden van buttons met een class

In de buttons staan de ‘classes' vermeld. Je kan de HTML kopieren en hoeft vervolgens alleen de naam van de class in de button te veranderen. De bijbehorende CSS-code die je in je thema moet plaatsen vind je verderop in deze handleiding.

Variabele grootte

html van de bovenste button:

<br />
<a href="https://www.cursuswp.com/bootcamp"><button class="button bt-mini">button bt-mini</button></a><br />

buttons:

Variabele soort

html van de bovenste button:

<br />
<a href="https://www.cursuswp.com/bootcamp"><button class="button bt-basis">button bt-basis</button></a><br />

buttons:

Combinaties met HTML en CSS

Vervolgens kun je eenvoudig combinaties maken:

Buttons centreren

Vervolgens kun je ook eenvoudig een button centreren. Zoals hier:

Je kan de button in je editor centreren of de volgende code toevoegen:

<code>

HIER KOMT DE BUTTON DIE AL GEMAAKT HEBT


De HTML van deze gecentreerde button ziet de dan alsvolgt uit:

Meer voorbeelden van gecentreerde buttons:

De laatste stap is de stijlen in je thema plaatsen.

CSS in je thema plaatsen

Alleen de codes in je HTML plaatsen werkt niet. Je moet bijbehorende CSS ook in je thema plaatsen. De HTML en CSS praten dus met elkaar. De bijbehorende CSS die je in je thema moet plaatsen vind je in de Login van je :

Voor gevorderde WordPressers

Handleiding Call to action button maken

Over de van je Call-to-action button zijn duizenden onderzoeken gedaan. Welke kleur werkt goed en welke minder. Alle kleuren zijn wel onderzocht: rood, groen, oranje, blauw, etc. De is afhankelijk van zoveel factoren, bijvoorbeeld doelgroep en markt, dat het niet te zeggen is, welke kleur standaard voor jouw website zal werken. De vuistregel die zeker werkt is, dat je Call-to-action button er uit moet springen qua kleur. Lees meer over Call-to-action buttons en kleur in dit onderzoek:
Onderzoek beste kleur Call-to-action button

Hoe bepaal je de beste kleur voor je Call to action button


Stel je kleur is de hex-waarde #0395ff.
Dit is de overheersende kleur op je website, bijvoorbeeld in je en je links.

blauw
#0395ff

Complementaire kleur voor Call to action button

Het werkt goed om dan de complementaire kleur te gebruiken. De complementaire kleur is de kleur die aan de andere kant van de staat. Je kan deze handig vinden op de site color-hex.com. Je kan hier eenvoudig je huisstijlkleur ingeven. Dit wordt dan:
https://www.color-hex.com/color/0395ff
Onder het kopje ‘Complementary Color' vind je de complementaire kleur. Dit is ff6d03:
https://www.color-hex.com/color/ff6d03


De complementaire kleur is de hex-waarde #ff6d03.
In het CSS van je thema kun je ff6d03 aangeven.

oranje
#ff6d03

Mouse over kleur maken voor Call to action button

Het werkt goed om een kleur te gebruiken met dezelfde verzadiging. Je kan deze ook weer vinden op de site color-hex.com. Onder het kopje ‘Monochromatic Colors' vind je de kleuren met dezelfde verzadiging. Kies dan de kleur die het dichtst bij je kleur van je button staat.


De Monochromatische kleur die het dichtst bij de oranje hex-waarde #ff6d03 staat is #e96200. Je kan dit vinden op:
https://www.color-hex.com/color/e96200
In het CSS van je thema kun je hex-kleur #e96200 aangeven als je mouse-over kleur. Dit kan er dan zo uit komen te zien in je CSS:
.bt-call-to-action:hover {background-color: #e96200;}

oranje
#e96200

Resultaat van je Call to action button met mouse over

Uiteindelijk komt je oranje button er dan zo uit te zien. Let even op de mooie mouse over:

Tip: maak buttons niet te klein | Touchscreen readiness

De links en knoppen op uw pagina zijn te klein en/of te dicht bij elkaar om gemakkelijk op een mobiel apparaat te kunnen klikken. Het gemiddelde vingertopgebied is 48 pixels breed en hoog. Tikkende doelen moeten ook voldoende ruimte hebben zodat de vinger van een gebruiker die op een link of knop drukt, niet per ongeluk een andere link of knop aanraakt. De minimale benodigde ruimte tussen de targets is 8 pixels aan alle zijden. Dit heet Touch scree readiness en is heel belangrijk voor SEO.

Handleidingen en tips over kleur en webdesign

Meer goede tips, handleidingen en informatie over kleur, ontwerp en design voor je WordPress website vind je hier:

CSS code voor een button

De CSS voor de button moet je in je thema plaatsen. Je kan deze uiteraard aanpassen.

.button {
background-color: #0cb5d7;
border: none;
color: #fefefe;
padding: 15px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
line-height: 140%;
margin: 12px 2px 14px 0px;
cursor: pointer;
border-radius: 30px;
}

.bt-big {
font-size: 18px;
padding: 16px 30px;
}

Meer voorbeelden van buttons met CSS

Meer voorbeelden van buttons met CSS vind je hier:
Voorbeelden buttons met CSS

Voorbeeld van een systeem voor Gutenberg buttons

Hieronder vind je eenvoorbeeld van een systeem voor Gutenberg buttons zoals ik dat eigenlijk altijd voor opdrachtgevers van WordPress websites maak:

In de WordPress Gutenberg editor kun je deze stijlen aangeven bij Extra CSS-classes zoals hieronder:

Tijdens een design-training leg ik uit hoe je dit doet.

Hoe een pagina koppelen in html met een button / knop

Om in HTML een pagina aan een andere pagina te koppelen met behulp van knoppen kunnen we HTML Anchor tags gebruiken.
waar we de HTML-knop moeten aangeven/schrijven tussen de begin- en eindtags van de Anchor-tag.

   <a href='anderepagina.html'>
      <button>mijnknop</button>
    </a>

Meer weten over Zelf buttons maken in WordPress met een HTML Class en CSSof info?

Wil je meer informatie? Veel bezoekers met interesse in Zelf buttons maken in WordPress met een HTML Class en CSS bekeken ook de onderstaande handleidingen:

Scroll naar boven