Knappar och länkar

Knappar används för att utföra en handling eller funktion. Länkar används för att navigera mellan, eller inom, sidor.

Användning av knappar

Placera knappar visuellt och flödesmässigt i en logisk ordning, så att användarna enkelt kan navigera även med hjälp av tangentbordet.
Markera extra tydligt den knapp som tar användaren till nästa steg.
Se till att ha tillräckligt avstånd mellan knapparna så att det enkelt går att skilja dem åt. Minst 8px.

Nedan visas riktlinjer för states för knappar. Knappen stylas sedan efter den aktuella sidans visuella uttryck.

Gör en enda länk (ett A-element) av ikon och text i en sammansatt länk.
Leder länken till en extern sida ska det framgå i koden samt visuellt precenteras med en ikon.
Den streckade linjen under länken ska ligga xpx under länktexten oxh vara 1px tjock.
Använd aldrig understruken text till något som inte är en länk.
I löpande text används länktyp 1 (Se bild nedan), för att länken ska kunna särskilja från resterande text.
I andra fall används länktyp 2 (Se bild nedan), som exempelvis i menyer.

Nedan visas riktlinjer för states för länkar. De olika siterna kan sedan applicera sina egna färger.

För att skapa en mjukare upplevelse för användare använder vi animationer på element, länkar och övergångar.

Det innebär att vi gör en enkel toning när pekaren är över länkar och animerar ikoner som passar att animeras.

Animerad toning 0,2 sekunder mellan normal och hover.

transition: all .2s ease-in-out;

Animation 0,5 sekunder mellan nyckelbilder