Lägg till förkonstruerade knappar till din webbplats med Butns.css

Frontend-ramar, till exempel Bootstrap, kommer med deras egna knapp stilar, men de brukar inte ha mycket variation.

Det fria Butns bibliotek erbjudanden en rad anpassade knapp stilar utan hela ramen bifogas. Detta är perfekt för utvecklare som Har redan en anpassad siddesign men vill inte göra med att skapa egna knappar.

Du har praktiskt taget obegränsade val och kombinationer att välja mellan. Butns har över 30 + olika bakgrunds- / kantfärger att du kan mixa och matcha för traditionella platta knappar eller piller knappar eller ens spökknappar.

Du kan också välja mellan olika gradient stilar som sammanfogar två olika färger tillsammans. Dessa lutningsknappar ser jättebra ut med en droppskugga för en upphöjd präglingseffekt.

Tillsammans med färger och skuggor kan du också ändra formen, storleken och genomskinligheten av valfri knapp.

Allting är kontrolleras via CSS klasser, så du har verkligen fullständig tillgång till allt i biblioteket.

Vad jag mest tycker om Butns är att du lätt kan växla mellan olika stilar precis vid uppdatering av ett klassnamn. Det finns inget alltför komplicerat system för att lägga till stilar eller redigera ett stylesheet. Du byter bara klasser, och du är bra att gå.

Även om det inte finns någon skada i skriva över några av dessa klasser med egna preferenser. Det är skönheten i den cascading effekten i CSS.

För att komma igång bara ladda ner .css fil från Butns hemsida eller från GitHub repo. De länkar båda till den mest aktuella versionen, så båda sätten är OK.

När det är lagt till på din webbsida, bara lägg till klassen .knapp till allt du vill bli formad som en knapp. Därifrån är det en fråga om lägger till extra klasser baserat på färger, storlek och stil på knappen du vill ha.

Ta en titt på GitHub-sidan ner nära klasslistan. Du hittar en fullständig lista över alla klasser för att anpassa färg, knapptyp och visningsalternativ som små / stora eller halvtransparenta.

Butns.css är enkelt ett av de mest omfattande knappformatarket på webben. Du kan lägga till det på flera webbprojekt, och alla kan ha ett annat utseende med det här biblioteket.

Det är också spelar snyggt med andra ramar till exempel Bootstrap sedan klasserna överlappar varandra inte. Så du kan slå samman Butns med nästan alla andra fronten ramar på marknaden utan krångel.