Pdf downloaden
Pdf downloaden
Deze wikiHow 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.
Stappen
-
Typ <button in de body van je HTML. 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.
-
Typ style= na "button" in je button-tag. Dit geeft aan dat er stijlelementen in de button-tag zitten. Alle stijlelementen worden achter het "=" teken geplaatst.
-
Voeg een aanhalingsteken (") toe na het isgelijkteken (=). Alle stijlelementen in je HTML-knoppentag moeten binnen aanhalingstekens worden geplaatst.
-
Typ background-color: binnen de aanhalingstekens na "style=". Dit element wordt gebruikt om de achtergrondkleur van de knop te veranderen.
-
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] X Bron
-
Type een puntkomma (;) na de achtergrondkleur. Gebruik een puntkomma om de verschillende stijlelementen in de HTML-knopmarkering te scheiden.
-
Typ border-color: binnen de aanhalingstekens na "style=". 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 (;).
-
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.
-
Type een puntkomma (;) na de randkleur. Gebruik een puntkomma om de verschillende stijlelementen in de HTML knop-tag te scheiden.
-
Typ color: binnen de aanhalingstekens na "style=". 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.
-
Typ de naam van een kleur of hexadecimale code. Dit komt na "color:" in het stijlelement. Dit bepaalt de kleur van de tekst in de knop.
-
Typ een aanhalingsteken (") na elk stijlelement. 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.
-
Typ > na het stijlelement. Dit is een eind-tag.
-
Typ de tekst van de knop na de knopmarkering. Ben je klaar met het de openingstag van je knop, typ dan de tekst die binnen de knop komt, na de tag.
-
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
-
Typ <head> bovenin het HTML-document. 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.
-
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.
-
Typ .button { op een afzonderlijke regel na de stijlsectie. Dit opent het stylesheet voor een knop waarvoor je een stijl maakt. [2] X Bron
- 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.
-
Typ background-color: . Deze code komt op een aparte regel in het stylesheet van de knoppen. Dit element regelt de achtergrondkleur van de knop.
-
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.
-
Typ border-color: . Het element bepaalt de kleur van de rand rond de knop. Typ dit op een aparte regel in het stijlsheet voor de knop.
-
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 color: . Typ dit op een afzonderlijke regel in het stylesheet. Dit element regelt de kleur van de tekst in de knop.
-
Typ de naam van een kleur of hexadecimale code, gevolgd door een puntkomma (;). Dit bepaalt de kleur van de tekst in de knop. Dit komt na het "color:"-element in het stylesheet van de knop.
-
Typ } op een aparte regel. Hiermee sluit je het stylesheet voor de knop. Je kunt meerdere stylesheets voor knoppen maken, zolang je elke knop maar een unieke naam geeft.
-
Typ </style> nadat je klaar bent met de CSS. 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.
-
Typ </head> . Hiermee sluit je de header van je HTML-document af.
-
in de body van je HTML-document." src="https://www.wikihow.com/images_en/thumb/8/8b/11147764-28.jpg/v4-460px-11147764-28.jpg" decoding="async" class="efab57dd69ac0d209a117a05464a6b9b whcdn content-fill p_maxWidth" data-srclarge="https://www.wikihow.com/images/thumb/8/8b/11147764-28.jpg/v4-728px-11147764-28.jpg" data-width="280" data-height="344" id="efab57dd69ac0d209a117a05464a6b9b"/>
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}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
Bronnen
Advertentie
Meld je aan voor de gratis nieuwsbrief van wikiHow!
Je vindt dan elke week handige handleidingen in je inbox.
Meld me aan!
