--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/knopstijlen' title: 'Kies knopstijlen die bezoekers sturen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:30:06+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Je beslist hoe luid elke knop is. Een effen knop markeert de ene actie die je het meest wilt, en een omlijnde knop ernaast biedt het alternatief zonder te concurreren. Deze pagina toont hoe je zo'n paar stijlt en welke instelling wat wijzigt. Om een knop toe te voegen en zijn link in te stellen, zie Een knop toevoegen. De video volgt de stappen hieronder: hij maakt Apply now de hoofdknop en voegt een omlijnde tweede knop toe. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Kies knopstijlen die bezoekers sturen' description: |- Je beslist hoe luid elke knop is. Een effen knop markeert de ene actie die je het meest wilt, en een omlijnde knop ernaast biedt het alternatief zonder te concurreren. Deze pagina toont hoe je zo'n paar stijlt en welke instelling wat wijzigt. Om een knop toe te voegen en zijn link in te stellen, zie Een knop toevoegen. De video volgt de stappen hieronder: hij maakt Apply now de hoofdknop en voegt een omlijnde tweede knop toe. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:30:06+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/knopstijlen' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/knopstijlen' description: |- Je beslist hoe luid elke knop is. Een effen knop markeert de ene actie die je het meest wilt, en een omlijnde knop ernaast biedt het alternatief zonder te concurreren. Deze pagina toont hoe je zo'n paar stijlt en welke instelling wat wijzigt. Om een knop toe te voegen en zijn link in te stellen, zie Een knop toevoegen. De video volgt de stappen hieronder: hij maakt Apply now de hoofdknop en voegt een omlijnde tweede knop toe. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/nl/hc/documentation/learn-dxpr-builder/design/overview) # Kies knopstijlen die bezoekers sturen. DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen ## In deze gids Gerelateerde gidsen - [Een knop toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/knop) - [Elementen laten reageren bij hover](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten) - [Gebruik je merkkleuren](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kleur-en-branding) Je beslist hoe luid elke knop is. Een effen knop markeert de ene actie die je het meest wilt, en een omlijnde knop ernaast biedt het alternatief zonder te concurreren. Deze pagina toont hoe je zo'n paar stijlt en welke instelling wat wijzigt. Om een knop toe te voegen en zijn link in te stellen, zie [Een knop toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/button). De video volgt de stappen hieronder: hij maakt Apply now de hoofdknop en voegt een omlijnde tweede knop toe. ## Een hoofd- en een tweede knop stijlen Begin met een knop op de pagina, zoals **Apply now**. 1. Wijs de knop aan en open **More > Settings**. 2. Zet **Type** op **Primary**. 3. Zet **Size** op **Large** en klik op **Save**. 4. Wijs de knop opnieuw aan en open **More > Clone**. De kopie verschijnt direct onder het origineel. 5. Open **More > Settings** op de kopie. Wijzig zijn **Title**, bijvoorbeeld in `Download brochure`, en zijn **Link**. 6. Schakel **Outline style** in en klik op **Save**. 7. Klik op **Save**. ## Kies een stijl voor elke actie | Actie | Stijl | Voorbeeld | |---|---|---| | De ene actie die je het meest wilt | Effen **Primary** | Apply now | | Een alternatief | **Outline style** in dezelfde **Type** | Download brochure | | Een kleine actie | **Link**, die eruitziet als een tekstlink | Read the terms | | Een waarschuwing of een laatste stap | **Danger** of **Warning** | Cancel my booking | Gebruik één effen knop per sectie, zodat bezoekers meteen zien waar ze klikken. Schrijf labels die zeggen wat er gebeurt: "Get started" in plaats van "Click here", "Send message" in plaats van "Submit". ## Wat je ziet Twee grote knoppen stapelen in de kolom: een effen met de primaire kleur van je thema en een omlijnde met een rand en tekst in dezelfde kleur. De effen trekt als eerste de aandacht. Links openen niet terwijl je bewerkt. Om ze te testen, sla je de pagina op, open je het weergavemenu (het oogpictogram) en kies je **Preview**. ## Instellingen | Instelling | Wat het doet | Standaard | |---|---|---| | **Type** | De kleurstijl: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** of **Dark**. De kleuren komen uit je thema. | **Primary** | | **Outline style** | Een gekleurde rand en tekst zonder vulling | Uit | | **Size** | **Normal**, **Large** of **Small** | **Normal** | | **Block button** | Rekt de knop uit over de volle breedte van zijn kolom | Uit | | **Link target** | **Same window** of **New window**. Het toont zodra **Link** een waarde heeft. | **Same window** | Voor themers: elke **Type** voegt de Bootstrap-klasse `btn-` toe, zoals `btn-primary`. Met **Outline style** aan wordt het `btn-outline-`, behalve voor **Link**, die altijd `btn-link` blijft. **Large** voegt `btn-lg` toe, **Small**voegt `btn-sm` toe en **Block button** voegt `btn-block` toe. ## Als je de stijl niet ziet - **De omlijnde knop toont geen rand.** **Type** staat op **Link**, die er altijd uitziet als een tekstlink, dus **Outline style** heeft geen effect. Kies een andere **Type** voor een omlijnde knop. - **De knop verdwijnt bijna.** **Light** lijkt op wit, dus hij vervaagt in een witte sectie. Kies een donkerdere **Type**, of geef de sectie een achtergrondkleur. - **De link opent in hetzelfde tabblad.** **Link target** staat op **Same window**, en het toont alleen zodra **Link** een waarde heeft. Vul eerst **Link** in en kies daarna **New window**. ## Wat nu? - [Een knop toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/button): elke knopinstelling, met een video. - [Hovereffecten](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten): maak een knop donkerder of voeg een schaduw toe wanneer de pointer hem bereikt. - [Kleur en branding](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kleur-en-branding): houd knopkleuren in lijn met je merk.