Primair
De CTA met shimmer.
Klasse .atlas-cta-primary (+ .atlas-cta-shimmer voor de lichtveeg). Blauw verloop, bij hover warmt de rand naar goud. Er bestaan drie echte maten op de site.
Hero-maat · 14/26 px · 14 px tekst · inline radius 4px
Zoals in de homepage-hero. De inline stijlen horen bij dit gebruik.
HTML
<div class="d-flex flex-wrap gap-3 align-items-center"><a href="#" class="atlas-cta-primary atlas-cta-shimmer" style="position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;background:var(--brand-500);color:#fff;border-radius:var(--r-input);font-weight:700;font-size:14px;box-shadow:0 0 24px rgba(46,128,255,.35),var(--glow-brand-lg);transition:background .2s,transform .2s,box-shadow .2s"><span aria-hidden="true" style="position:absolute;inset:-2px;border-radius:calc(var(--r-input) + 2px);background:radial-gradient(closest-side,rgba(78,160,255,.45),transparent 70%);filter:blur(8px);opacity:.5;animation:2.6s ease-in-out 0s infinite atlas-cta-pulse;z-index:-1"></span>Plan een intake <svg class="atlas-icon " width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div>Standaardmaat · klasse alleen · 13/26 px · 15 px tekst · radius 8px
HTML
<div class="d-flex flex-wrap gap-3 align-items-center"><a href="#" class="atlas-cta-primary">Plan een intake <svg class="atlas-icon " width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a><a href="#" class="atlas-cta-primary">Zonder pijl</a></div>CTA-band-maat · 16/32 px · 16 px tekst
Rechts in de CTA-band onderaan de homepage.
HTML
<a href="#" class="atlas-cta-primary" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:var(--brand-500);color:#fff;border-radius:var(--r-input);font-weight:700;font-size:16px;white-space:nowrap;box-shadow:var(--glow-brand-lg);transition:background .2s,transform .2s,box-shadow .2s">Plan een intake <svg class="atlas-icon " width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>Goud
Secundaire accent-CTA.
Klasse .atlas-cta-gold: gouden rand en gloed. Gebruik spaarzaam, één per scherm.
Goud
HTML
<div class="d-flex flex-wrap gap-3 align-items-center"><a href="#" class="atlas-cta-gold" style="color:var(--accent-gold)">Bekijk tarieven</a><a href="#" class="atlas-cta-gold" style="color:var(--accent-gold)">Open prijzen</a></div>Ghost en link
Rustige acties naast de primaire.
Ghost-knop (live "Hoe we werken")
Mono-pijl in brand-400; hover verschuift de ruimte (.atlas-link-arrow).
HTML
<div class="d-flex flex-wrap gap-3 align-items-center"><a href="#" class="atlas-link-arrow" style="display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:rgba(255,255,255,.03);color:var(--text-2);border:1px solid var(--border-strong);border-radius:var(--r-input);font-weight:600;font-size:14px;transition:border-color .2s,color .2s,background .2s,box-shadow .2s">Hoe we werken<span style="font-family:var(--font-mono);font-size:12px;color:var(--brand-400)">→</span></a></div>Tekstlink met pijl
HTML
<a href="#" class="atlas-link-arrow">Lees meer <svg class="atlas-icon " width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>Bootstrap-knoppen
Voor de website builder.
De Odoo-module stijlt .btn-primary, .btn-secondary en .btn-link met 4px radius. Maten via Bootstrap.
Varianten
HTML
<button class="btn btn-primary">Primair</button><button class="btn btn-secondary">Secundair</button><button class="btn btn-link">Link-knop</button>Maten
HTML
<button class="btn btn-primary btn-sm">Klein</button><button class="btn btn-primary">Standaard</button><button class="btn btn-primary btn-lg">Groot</button>Met icoon (Feather)
HTML
<button class="btn btn-primary d-inline-flex align-items-center gap-2"><svg class="atlas-icon " width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Plan een intake</button><button class="btn btn-secondary d-inline-flex align-items-center gap-2"><svg class="atlas-icon " width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Download</button>Volle breedte (mobiel)
Op mobiel krijgen alle .atlas-cta-primary automatisch volle breedte (live CSS, max-width 767px).
HTML
<div class="w-100" style="max-width:420px"><button class="btn btn-primary w-100">Verstuur aanvraag</button></div>States
Hover, focus, actief, uitgeschakeld.
De vaste voorbeelden gebruiken .is-hover / .is-focus: dezelfde regels als de echte :hover/:focus, alleen om ze naast elkaar te kunnen tonen.
.atlas-cta-primary
HTML
<div class="kit-states"><div><small>standaard</small><a href="#" class="atlas-cta-primary">Plan een intake <svg class="atlas-icon " width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div><div><small>hover</small><a href="#" class="atlas-cta-primary is-hover">Plan een intake <svg class="atlas-icon " width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div><div><small>focus</small><a href="#" class="atlas-cta-primary is-focus-ring">Plan een intake <svg class="atlas-icon " width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div></div>.atlas-cta-gold
standaardBekijk tarieven
hoverBekijk tarieven
HTML
<div class="kit-states"><div><small>standaard</small><a href="#" class="atlas-cta-gold" style="color:var(--accent-gold)">Bekijk tarieven</a></div><div><small>hover</small><a href="#" class="atlas-cta-gold is-hover" style="color:var(--accent-gold)">Bekijk tarieven</a></div></div>.btn-primary
standaard
hover / focus
focus-ring
uitgeschakeld
HTML
<div class="kit-states"><div><small>standaard</small><button class="btn btn-primary">Verstuur</button></div><div><small>hover / focus</small><button class="btn btn-primary is-hover">Verstuur</button></div><div><small>focus-ring</small><button class="btn btn-primary is-focus-ring">Verstuur</button></div><div><small>uitgeschakeld</small><button class="btn btn-primary" disabled>Verstuur</button></div></div>.btn-secondary
standaard
hover
uitgeschakeld
HTML
<div class="kit-states"><div><small>standaard</small><button class="btn btn-secondary">Annuleer</button></div><div><small>hover</small><button class="btn btn-secondary is-hover">Annuleer</button></div><div><small>uitgeschakeld</small><button class="btn btn-secondary" disabled>Annuleer</button></div></div>