Button

Aan de hand van CSS buttons maken van links leg ik hier even uit.

Je kan ze een border geven en wanneer iemand over een link gaat veranderd de achtergrondkleur. Je kan de layout zelf bepalen naar wens. Een button maken in CSS gebeurd met {display:block} , daarna kan je zelf de breedte en hoogte opgeven met width en height indien nodig. In het eerste voorbeeld heb ik dit niet gedaan om het overzicht een beetje te kunnen behouden.

Een voorbeeld

Ik geef dus het volgende op.
(dit zijn de belangrijkste 4, de andere zijn meer voor de textopmaak)

Geeft ons dit resultaat

Button 1

Button 2

Button 3

Button 4

Je hebt ook de mogelijkheid om een afbeelding als achtergrond te gebruiken. Als je een afbeelding hebt die uit 2 delen bestaat dan kan je door middel van{ background-position} je afbeelding laten verspringen naar het andere deel uit je afbeelding.

Afbeelding die ik gebruikt heb

Een voorbeeld van de code

Ik geef dus het volgende op.
(dit zijn de belangrijkste 4, de andere zijn meer voor de textopmaak)

Geeft ons dit resultaat

Dit was een kleine tutorial over buttons in CSS maar heel handig om weten en je kan er leuke dingen mee maken. Je test best de voorbeelden nog eens maar dan met een eigen opmaak en met eigen afbeelding om een goed doorzicht te krijgen in de code.