Knappar är grundläggande interaktiva element inom webbdesign. Tailwind CSS erbjuder ett brett utbud av verktyg för att effektivt styla knappar och hantera deras olika tillstånd, såsom hover, fokus och aktiv.

Grundläggande knappstil

För att styla en grundläggande knapp kan du använda verktyg för bakgrundsfärg, textfärg, utfyllnad, kantbåge och teckenvikt.

Förklaring

1. bg-yellow-500: Anger bakgrundsfärgen till en nyans av blått;
2. text-white: Anger textfärgen till vitt;
3. font-bold: Gör texten fetstil;
4. py-2: Lägger till vertikal utfyllnad (0.5rem eller 8px);
5. px-4: Lägger till horisontell utfyllnad (1rem eller 16px);
6. rounded: Lägger till små rundade hörn.

Hover-tillstånd

För att ändra utseendet på en knapp när användaren håller muspekaren över den kan du använda prefixet hover: med valfri hjälparklass.

hover:bg-blue-700: Ändrar bakgrundsfärgen till mörkblå när knappen hovras över.

Fokusläge

För att styla en knapp när den är i fokus (t.ex. när den väljs med tangentbordet) kan du använda prefixet focus: med valfri hjälparklass.

I det här exemplet ändras knappen till blå när du för muspekaren över den. Om du använder Tab-tangenten blir knappen röd.

Aktiva och inaktiverade tillstånd

Aktiva och inaktiverade tillstånd används mer sällan. Det är dock viktigt att ta hänsyn till dem.

För att styla en knapp när den är aktiv (t.ex. när den klickas på) kan du använda prefixet active: med valfri hjälparklass.

För att styla en knapp när den är inaktiverad (t.ex. när den inte kan interageras med) kan du använda prefixet disabled: med valfri hjälparklass.

Förklaring

1. active:bg-green-800: Ändrar bakgrundsfärgen till en mörkare grön nyans när knappen är aktiv (nedtryckt);
2. opacity-50: Minskar knappens opacitet för att ge ett inaktiverat utseende;
3. cursor-not-allowed: Ändrar markören för att visa att knappen inte är klickbar;
4. disabled attribute: Gör knappen icke-interaktiv.

Exempel på alla tillstånd

Kombinera alla tillstånd i ett exempel

Förklaring

1. bg-blue-500: Anger standardbakgrundsfärg;
2. hover:bg-blue-700: Ändrar bakgrundsfärgen vid hovring;
3. focus:outline-none: Tar bort standardfokusramen;
4. focus:ring-2: Lägger till en fokusring med en bredd på 2 pixlar;
5. focus:ring-blue-600: Anger färgen på fokusringen;
6. focus:ring-opacity-50: Anger opaciteten för fokusringen;
7. active:bg-blue-800: Ändrar bakgrundsfärgen när knappen är aktiv;
8. text-white: Anger textfärgen till vitt;
9. font-bold: Gör texten fetstil;
10. py-2: Lägger till vertikal utfyllnad;
11. px-4: Lägger till horisontell utfyllnad;
12. rounded: Lägger till små rundade hörn.

Obs

Om du behöver fördjupa dig i Tailwind Button Component, finns här en länk till den officiella dokumentationen.