Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Lage og Style Knapper | Bygge Grunnleggende Komponenter
Tailwind CSS for Webbutvikling

bookLage og Style Knapper

Knapper er grunnleggende interaktive elementer i webdesign. Tailwind CSS tilbyr et bredt utvalg av verktøy for å style knapper effektivt og håndtere deres ulike tilstander, som hover, fokus og aktiv.

Grunnleggende knappestil

For å style en enkel knapp kan du bruke verktøy for bakgrunnsfarge, tekstfarge, polstring, avrundede hjørner og skriftvekt.

index.html

index.html

copy

Forklaring

  1. bg-yellow-500: Angir bakgrunnsfargen til en nyanse av blått;
  2. text-white: Angir tekstfargen til hvit;
  3. font-bold: Gjør teksten fet;
  4. py-2: Legger til vertikal polstring (0.5rem eller 8px);
  5. px-4: Legger til horisontal polstring (1rem eller 16px);
  6. rounded: Legger til små avrundede hjørner.

Hover-tilstand

For å endre utseendet til en knapp når brukeren holder musepekeren over den, kan du bruke prefikset hover: sammen med hvilken som helst hjelpeklasse.

index.html

index.html

copy

hover:bg-blue-700: Endrer bakgrunnsfargen til mørk blå når knappen holdes over med musen.

Fokus-tilstand

For å style en knapp når den er i fokus (for eksempel når den er valgt med tastaturet), kan du bruke prefikset focus: sammen med en hvilken som helst hjelpeklasse.

index.html

index.html

copy

I dette eksemplet endres knappen til blå når du holder musepekeren over den. Hvis du bruker Tab-tasten, blir knappen rød.

Aktive og deaktiverte tilstander

Aktive og deaktiverte tilstander brukes sjeldnere. Likevel bør vi ta hensyn til dette også.

For å style en knapp når den er aktiv (for eksempel når den klikkes på), kan du bruke prefikset active: sammen med en hvilken som helst hjelpeklasse.

For å style en knapp når den er deaktivert (for eksempel når den ikke kan interageres med), kan du bruke prefikset disabled: sammen med en hvilken som helst hjelpeklasse.

index.html

index.html

copy

Forklaring

  1. active:bg-green-800: Endrer bakgrunnsfargen til en mørkere grønnfarge når knappen er aktiv (trykket);
  2. opacity-50: Reduserer knappens opasitet for å gi et deaktivert utseende;
  3. cursor-not-allowed: Endrer markøren for å indikere at knappen ikke er klikkbar;
  4. disabled-attributt: Gjør knappen ikke-interaktiv.

Eksempel på alle tilstander

Kombinere alle tilstander i ett eksempel

index.html

index.html

copy

Forklaring

  1. bg-blue-500: Angir standard bakgrunnsfarge;
  2. hover:bg-blue-700: Endrer bakgrunnsfargen ved hover;
  3. focus:outline-none: Fjerner standard fokusramme;
  4. focus:ring-2: Legger til en fokusring med bredde på 2 piksler;
  5. focus:ring-blue-600: Angir fargen på fokusringen;
  6. focus:ring-opacity-50: Angir opasiteten til fokusringen;
  7. active:bg-blue-800: Endrer bakgrunnsfargen når knappen er aktiv;
  8. text-white: Angir tekstfargen til hvit;
  9. font-bold: Gjør teksten fet;
  10. py-2: Legger til vertikal polstring;
  11. px-4: Legger til horisontal polstring;
  12. rounded: Legger til små avrundede hjørner.

Merk

Hvis du ønsker å fordype deg mer i Tailwind Button Component, finner du en lenke til den offisielle dokumentasjonen.

1. Hvordan endrer du bakgrunnsfargen på en knapp når den holdes over med musen?

2. Hvilken hjelpeklasse fjerner standard fokusramme fra en knapp?

3. Hvilken hjelpeklasse endrer bakgrunnsfargen til en knapp når den er aktiv (trykket)?

question mark

Hvordan endrer du bakgrunnsfargen på en knapp når den holdes over med musen?

Select the correct answer

question mark

Hvilken hjelpeklasse fjerner standard fokusramme fra en knapp?

Select the correct answer

question mark

Hvilken hjelpeklasse endrer bakgrunnsfargen til en knapp når den er aktiv (trykket)?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 1

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookLage og Style Knapper

Sveip for å vise menyen

Knapper er grunnleggende interaktive elementer i webdesign. Tailwind CSS tilbyr et bredt utvalg av verktøy for å style knapper effektivt og håndtere deres ulike tilstander, som hover, fokus og aktiv.

Grunnleggende knappestil

For å style en enkel knapp kan du bruke verktøy for bakgrunnsfarge, tekstfarge, polstring, avrundede hjørner og skriftvekt.

index.html

index.html

copy

Forklaring

  1. bg-yellow-500: Angir bakgrunnsfargen til en nyanse av blått;
  2. text-white: Angir tekstfargen til hvit;
  3. font-bold: Gjør teksten fet;
  4. py-2: Legger til vertikal polstring (0.5rem eller 8px);
  5. px-4: Legger til horisontal polstring (1rem eller 16px);
  6. rounded: Legger til små avrundede hjørner.

Hover-tilstand

For å endre utseendet til en knapp når brukeren holder musepekeren over den, kan du bruke prefikset hover: sammen med hvilken som helst hjelpeklasse.

index.html

index.html

copy

hover:bg-blue-700: Endrer bakgrunnsfargen til mørk blå når knappen holdes over med musen.

Fokus-tilstand

For å style en knapp når den er i fokus (for eksempel når den er valgt med tastaturet), kan du bruke prefikset focus: sammen med en hvilken som helst hjelpeklasse.

index.html

index.html

copy

I dette eksemplet endres knappen til blå når du holder musepekeren over den. Hvis du bruker Tab-tasten, blir knappen rød.

Aktive og deaktiverte tilstander

Aktive og deaktiverte tilstander brukes sjeldnere. Likevel bør vi ta hensyn til dette også.

For å style en knapp når den er aktiv (for eksempel når den klikkes på), kan du bruke prefikset active: sammen med en hvilken som helst hjelpeklasse.

For å style en knapp når den er deaktivert (for eksempel når den ikke kan interageres med), kan du bruke prefikset disabled: sammen med en hvilken som helst hjelpeklasse.

index.html

index.html

copy

Forklaring

  1. active:bg-green-800: Endrer bakgrunnsfargen til en mørkere grønnfarge når knappen er aktiv (trykket);
  2. opacity-50: Reduserer knappens opasitet for å gi et deaktivert utseende;
  3. cursor-not-allowed: Endrer markøren for å indikere at knappen ikke er klikkbar;
  4. disabled-attributt: Gjør knappen ikke-interaktiv.

Eksempel på alle tilstander

Kombinere alle tilstander i ett eksempel

index.html

index.html

copy

Forklaring

  1. bg-blue-500: Angir standard bakgrunnsfarge;
  2. hover:bg-blue-700: Endrer bakgrunnsfargen ved hover;
  3. focus:outline-none: Fjerner standard fokusramme;
  4. focus:ring-2: Legger til en fokusring med bredde på 2 piksler;
  5. focus:ring-blue-600: Angir fargen på fokusringen;
  6. focus:ring-opacity-50: Angir opasiteten til fokusringen;
  7. active:bg-blue-800: Endrer bakgrunnsfargen når knappen er aktiv;
  8. text-white: Angir tekstfargen til hvit;
  9. font-bold: Gjør teksten fet;
  10. py-2: Legger til vertikal polstring;
  11. px-4: Legger til horisontal polstring;
  12. rounded: Legger til små avrundede hjørner.

Merk

Hvis du ønsker å fordype deg mer i Tailwind Button Component, finner du en lenke til den offisielle dokumentasjonen.

1. Hvordan endrer du bakgrunnsfargen på en knapp når den holdes over med musen?

2. Hvilken hjelpeklasse fjerner standard fokusramme fra en knapp?

3. Hvilken hjelpeklasse endrer bakgrunnsfargen til en knapp når den er aktiv (trykket)?

question mark

Hvordan endrer du bakgrunnsfargen på en knapp når den holdes over med musen?

Select the correct answer

question mark

Hvilken hjelpeklasse fjerner standard fokusramme fra en knapp?

Select the correct answer

question mark

Hvilken hjelpeklasse endrer bakgrunnsfargen til en knapp når den er aktiv (trykket)?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 1
some-alt