De kleur van knoppen in een HTML document wijzigen

Deze How.com.vn leer je hoe je de kleur van een knop in HTML kunt veranderen. Je kunt de kleur van een knop wijzigen met behulp van gewone HTML of met behulp van CSS (Cascading Style Sheets) in HTML5.

Methode 1

Methode 1 van 2:

HTML gebruiken

Pdf downloaden

Dit is het begin van de button-tag van je HTML-code. De body van je HTML is het gebied tussen de <body> en </body> tags. De body is de plek waar de zichtbare elementen van een webpagina worden geplaatst met HTML.
Dit geeft aan dat er stijlelementen in de button-tag zitten. Alle stijlelementen worden achter het "=" teken geplaatst.
Alle stijlelementen in je HTML-knoppentag moeten binnen aanhalingstekens worden geplaatst.
Dit element wordt gebruikt om de achtergrondkleur van de knop te veranderen.
5
Typ een kleurnaam of hexadecimale code na "background-color:". Je kunt de naam van een kleur (bijv. blauw) of een hexadecimale kleur typen.
- Om een hexadecimale code te vinden, ga je naar https://www.google.com/search?q=color+picker in een webbrowser. Gebruik de schuifbalk onderaan om een kleur te kiezen. Gebruik de cirkel in het venster om een kleur te kiezen. Markeer en kopieer de code van zes cijfers (inclusief het hekje) in de zijbalk aan de linkerkant en plak deze in je button-tag.
- Je kunt ook "transparant" als achtergrondkleur gebruiken^[1]XBron
Gebruik een puntkomma om de verschillende stijlelementen in de HTML-knopmarkering te scheiden.
Dit element wordt gebruikt om de kleur van de rand rond de knop te bepalen. Je kunt stijlelementen in willekeurige volgorde binnen de aanhalingstekens na "style=" plaatsen. Elk element moet worden gescheiden door een puntkomma (;).
8
Typ een kleurnaam of hexadecimale code voor de kleur van de kaderlijn. De kleurnaam of hexadecimale code voor de rand komt achter het element "border-color:" element.
- Als je de rand wilt verwijderen, typ dan border:none in plaats van het "border-color:" element te gebruiken.
Gebruik een puntkomma om de verschillende stijlelementen in de HTML knop-tag te scheiden.
Dit element wordt gebruikt om de tekstkleur in de knop te veranderen. Je kunt stijlelementen in willekeurige volgorde binnen de aanhalingstekens na "style=" plaatsen. Elk element moet door een puntkomma (;) worden gescheiden.
Dit komt na "color:" in het stijlelement. Dit bepaalt de kleur van de tekst in de knop.
Elk stijlelement moet tussen aanhalingstekens na "style=" in de button-tag staan. Als je klaar bent met het toevoegen van een stijlelement, typ dan een aanhalingsteken (") aan het einde om het stijlelement af te sluiten.
Dit is een eind-tag.
Ben je klaar met het de openingstag van je knop, typ dan de tekst die binnen de knop komt, na de tag.
15
Typ </button> na de knoptekst. Dit is de afsluitende tag voor je knop. De knop is nu compleet. De HTML-code moet er zo uitzien.
```
<!DOCTYPE html><html><body><button style="background-color:red; border-color:blue; color:white">Knoptekst</button></body></html>
```
Advertentie

Methode 2

Methode 2 van 2:

CSS gebruiken

Pdf downloaden

Zo ontstaat een header voor je HTML-document. De header van het document is de plaats waar de informatie komt die niet zichtbaar is op de webpagina. Dit omvat metadata, de titel van de pagina en stylesheets.
2
Typ <style>. Deze tag voegt een locatie toe op een webpagina voor cascade style sheets (CSS). Dit gedeelte komt in de header van een HTML-document.
- Sommige HTML-documenten maken gebruik van een extern stylesheet. Als dit het geval is, moet je de locatie van het externe CSS-bestand kennen en de stylesheets van de knoppen in dat document bewerken.
3
Typ .button { op een afzonderlijke regel na de stijlsectie. Dit opent het stylesheet voor een knop waarvoor je een stijl maakt. ^[2]XBron
- Je kunt de kleur van de knop ook veranderen als je de muisaanwijzer op de knop plaatst door een afzonderlijk stylesheet te maken met .button:hover { als openingstag.
. Deze code komt op een aparte regel in het stylesheet van de knoppen. Dit element regelt de achtergrondkleur van de knop.
5
Type de naam van een kleur of hexadecimale code gevolgd door een puntkomma (;). Typ dit na het element "background-color:" in het stylesheet van de knoppen. Dit geeft de achtergrondkleur van de knop aan.
- Om een hexadecimale code te vinden, ga je naar https://www.google.com/search?q=color+picker in een webbrowser. Gebruik de schuifbalk onderaan om een kleur te kiezen. Gebruik de cirkel in het venster om een kleur te kiezen. Markeer en kopieer de zescijferige code (met het hekje) in de zijbalk aan de linkerkant.
- Je kunt ook "transparant" typen als achtergrondkleur, om de achtergrond onzichtbaar te maken.
. Het element bepaalt de kleur van de rand rond de knop. Typ dit op een aparte regel in het stijlsheet voor de knop.
7
Typ de naam van een kleur of hexadecimale code gevolgd door een puntkomma (;). Dit bepaalt de kleur van de rand rond de knop. Dit komt na het element "border-color:" in het stylesheet van de knop.
- Als je de rand wilt verwijderen, gebruik dan border:none; in plaats van het element "border-color:colorname".
. Typ dit op een afzonderlijke regel in het stylesheet. Dit element regelt de kleur van de tekst in de knop.
Dit bepaalt de kleur van de tekst in de knop. Dit komt na het "color:"-element in het stylesheet van de knop.
Hiermee sluit je het stylesheet voor de knop. Je kunt meerdere stylesheets voor knoppen maken, zolang je elke knop maar een unieke naam geeft.
Nadat je klaar bent met het maken van al je stylesheets, typ je "</style>" op een aparte regel om het stijlgedeelte van je HTML-document af te sluiten.
Hiermee sluit je de header van je HTML-document af.
13
Typ <a href="url" class="button">button text</a> in de body van je HTML-document. Dit voegt een knop toe aan het zichtbare deel van je HTML-document met behulp van de stylesheets die in het Style-gedeelte van je HTML-document zijn gespecificeerd. Vervang "url" door het webadres waarnaar de knop verwijst. De body van je HTML-document komt tussen de <body> en </body> tags van je HTML-document. Je HTML-code zou er als volgt uit moeten zien:
```
<!DOCTYPE html><html>   <head>    <style>     .button {      background-color:blue;      border-color:red;      color:white;      }    </style>  </head>   <body>      <a href="https://www.wikihow.com" class="button">Home</a>   </body></html>
```
Advertentie