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
1 2 3 4 | <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> |
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.
1 2 3 4 5 6 | <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
1 2 3 4 | <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> |
Størrelser
Det er muligt at lave justere størrelsen på knapperne med klasserne btn-mini, btn-small, btn-large.
1 2 3 4 | <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> |