• Forsiden
  • Retningslinjer
  • Designregler
  • Integrationer
  • Integrationstyper
  • Link
  • Iframe
  • HTML
  • Portal Add-in
  • Menutyper
  • Sidemenu
  • Topmenu
  • Faneblade
  • Forløbsindikator
  • Layout
  • Typografi
  • Formularer
  • Tabeller
  • Lister
  • Fremhævede beskeder
  • Bokse
  • Knapper
  • Ikoner
  • Farver
  • Cookienotifikation
  • Hjælpeklasser
  • Hjælpeklasser
  • Javascripts mv.
  • Javascripts
  • Modalbokse
  • Ressourcer og eksempler
  • Eksempel på løsning med forløbsindikator
  • Kompatibilitet med Virk.dk

HTML-guide til udvikling af integrationsløsninger til Borger.dk

Knapper

Det er muligt at lave knapper på fire forskellige måder: a, button, input:button og input:submit. Knapper laves ved at benytte klassen button.

Basisknapper

<p><a href="#" class="btn">Knap lavet som link</a></p>
<p><button class="btn">Knap lavet med button</button></p>
<p><input class="btn" type="button" value="Knap lavet med input:button"></p>	
<p><input class="btn" type="submit" value="Knap lavet med input:submit"></p>	        

Knap lavet som link

Farver på knapper

Klasserne btn-oim (grøn), btn-blue, btn-red, btn-gray, btn-black, btn-purple benyttes, hvis der skal være ekstra fokus på knappen. btn-oim bør benyttes ved overgang til nyt trin ved brug af forløbsindikatorer. Det er ikke god praksis at have knapper med mange forskellige farver i en løsning.

<button class="btn btn-oim">Næste <i class="icon-caret-right"></i></button>
<button class="btn btn-blue">Knap</button>
<button class="btn btn-red">Knap</button>
<button class="btn btn-gray">Knap;</button>
<button class="btn btn-black">Knap</button>
<button class="btn btn-purple">Knap</button>					

Deaktiverede knapper

Knapper kan visuelt deaktiveres med klassen disabled. Det er dog nødvendigt at tilføje attributten disabled="disabled" til input og button. Ligeledes skal attributten href nulstilles for a

<p><a href="#" class="btn disabled">Link</a></p>
<p><button class="btn disabled" disabled="disabled">Knap lavet med button</button></p>
<p><input class="btn disabled" type="button" disabled="disabled" value="Knap lavet med input:button"></p>
<p><input class="btn disabled" type="submit" disabled="disabled" value="Knap lavet med input:submit"></p>								

Link

Størrelser

Det er muligt at lave justere størrelsen på knapperne med klasserne btn-mini, btn-small, btn-large.

<p><button class="btn btn-mini">Mini</button></p>
<p><button class="btn btn-small">Small</button></p>
<p><button class="btn">Normal</button></p>
<p><button class="btn btn-large">Large</button></p>					


© Digitaliseringsstyrelsen 2013