Idag ska vi ha roligt när vi tittar på ett fantastiskt nytt gratis verktyg för webbutvecklare som helt enkelt heter CSS Button. Den här webbappen gör det snabbt och enkelt att göra CSS-knapparna i dina drömmar med hjälp av enkla och intuitiva kontroller.
Jag har sett en hel del andra CSS-knapp beslutsfattare innan och nästan ingen verkligen uppskattar upprepad användning, men den här webbplatsen har mycket att göra för det och kan verkligen spara dig mycket tid och frustration. Låt oss hoppa in och kolla in det!
Möt CSS-knappen
CSS Button-appen är utmärkt för att starta dina knappar. Till att börja med finns det några saker på hemsidan som du inte vill missa. Grundläggande kontroller är ganska uppenbara, du kan starta en ny knapp från början, kolla in och ändra en mall eller ansluta till Twitter så att du kan spara ditt arbete.
Missa inte heller den något dolda? Slumpmässig knapp? funktionen i sidfoten. Det finns inte för mycket innehåll på webbplatsen för tillfället (appen är fortfarande i beta) men eftersom den plockar upp och får fler användare kommer den här funktionen att bli en rolig väg att upptäcka nya knappidéer.
Skapa en knapp från början
Jag är aldrig en att välja den enkla vägen, så låt oss börja med att bygga vår egen knapp helt från början. För att göra detta, klicka på länken till vänster:
Detta borde ta dig till en ny skärm där du kommer att ha alla kontroller som du behöver för att skapa en superfinerande knapp. Alla ingångar är grundläggande och använder antingen enkla former eller intuitiva WYSISYG-kontroller.
Vi går igenom varje steg för att visa dig hur processen fungerar. Tänk på att detta kan känna sig ganska involverat i en skriftlig layout, men när du försöker själv själv känner insatsen verkligen minimal.
Bakgrund Gradient
Det första steget vi ska ta är att definiera en bakgrund för vår knapp. Du kan antingen välja en fast färg eller en gradient, jag tar gradientväggen. Detta använder enkla färgväljare för att hjälpa dig att bygga din lutning. Om du någonsin har kodat CSS-gradienter för hand vet du att vi redan sparar oss en stor bit av tid eftersom det är mycket lättare att välja två färger än att skriva den kod som krävs för att utföra denna operation.
Att klicka på blixtbulten bredvid ett alternativ ger ut sin lista över kontroller. För många av dessa kan du klicka flera gånger för att lägga till effekten ett antal gånger. Detta hjälper till att skapa riktigt komplexa, Photoshop-liknande lager.
Förstå förhandsvisningen
Av till höger om knapparna är förhandsgranskningen av vad du skapar. Det ser inte ut som mycket vid denna tidpunkt, men det blir mycket bättre när vi utvecklas.
Observera att de har täckt alla baser här och låter dig ställa in de normala, svävar och aktiva staterna. Som standard kommer våra åtgärder att påverka det normala tillståndet, vi klickar helt enkelt på en av de andra staterna för att rikta dem specifikt. Den slutliga? versionen är en levande knapp som du kan använda för att utvärdera och interagera med din design.
Box-Shadow
Nästa upp är boxskuggkontrollen. Dessa är enkla och ger dig möjlighet att snabbt ange värden för offset, oskärpa, spridning osv. Du väljer sedan din färg och kan till och med byta insättningsalternativet för inre skuggor. Min en besvikelse här är att det inte ser ut att du kan ställa in skuggan med hjälp av ett rbga-värde, vilket är min föredragna metod så att bakgrunden framgår.
Knappmått
Nu är det dags att äntligen ge vår knapp något ämne. I det här avsnittet kan du ställa in en statisk storlek och lägga till marginaler / vadderingar för att lägga till vikt på din knapp. Du kan också runda hörnen med en viss gränsradie. Med alla dessa alternativ kan du vara så specifik som du vill, så du kan till exempel välja att ställa in gränsmarginalen för att vara densamma på alla sidor eller olika för varje hörn.
Efter detta steg kan vi se att vår knapp ser mycket mer ut, ja, en knapp!
Egenskaper för teckensnitt
Därefter har vi några kontroller för att ställa in våra text- och textskuggstilar. Jag uppskattar verkligen att kunna ställa in inte bara teckensnittet, utan teckensnittsstacken. Detta visar att utvecklaren hade kodgivare i åtanke när man byggde det här verktyget.
Efter detta steg ser vår knapp ganska skarp ut. Vi har satt bara om allt som vi behöver för en grundläggande knapp (du kan också gå in och ställa in en övergång om du vill).
Hover och Active
Efter att ha fått mitt vanliga knapptillstånd exakt hur jag vill ha det, är det dags att gå tillbaka och lägga till inställningarna för min svävar och aktiva stater. Jag tog den förutsägbara vägen för att göra knappen lite lättare på sväva och vända gradienten för att simulera en press på aktiv.
När vi är klara, får vi en fin tjock bit av CSS att placera i vår kod. Det är en stor bit av kod men det är allt jag gör och för det mesta resultatet av alla de galna webbläsarprefix som du måste använda för att dra av höjder och skuggor. När jag tittar på all kod som är nödvändig för den här enkla knappen blir det ganska tydligt hur mycket tid det här lilla verktyget räddade mig. Jag är mer än kapabel att skapa den här knappen för hand, men det skulle säkert ta mig flera minuter, jag var mycket snabbare med WYSIWYG-kontrollerna här.
Från en mall
Nu när vi har gått på DIY-vägen, låt oss gå tillbaka till början och ta det andra alternativet: starta från en mall. Om du klickar på den här länken tar du dig till mallarsidan där det finns fem exempel på super slick-knapp att välja mellan.
Ändra mallen
Till att börja med valde jag att starta från? Sexy Green Download Button? mall. Om du väljer ett alternativ tar du in samma generator som vi såg innan, den enda skillnaden är att den nu är förfylld med lämpliga inställningar för att skapa knappen nedan.
Det är jättebra att ha den solida basen redan uppbyggd, härifrån handlar det bara om att anpassa de värden som du vill ändra.Till exempel, med början på knappen ovan gick jag in och ändrade bara gränserna och boxskuggegenskaperna och kunde snabbt byta ut min egen unika faux 3D-knapp.
Värt ett försök?
Jag vet vad många av er tänker, och jag är med dig. Jag är en total nörd som älskar både konst och vetenskap av CSS så jag faktiskt njut av kodning av dessa typer av saker för hand. Med det sagt kan jag inte låta bli att uppskatta ett verktyg som verkligen kan spara mig tid, och det här är ett av de här verktygen. Utöver det vet jag inte alltid vad jag vill ha på en knapp när jag börjar skapa det och det är trevligt att få några visuella verktyg att experimentera med och tweak tills jag hittar något som jag gillar.
CSS-knappen är fortfarande i beta så jag körde över en bugg eller två. När du till exempel skriver in en färg för hand och sedan klickar på färgväljaren senare för att finjustera den, finner du att färgväljaren inte uppdateras för att återspegla den manuella inmatningen.
Bortsett från några mycket små quirks är detta ett solidt verktyg som jag planerar att lägga till i min ständigt växande CSS3 verktygslåda. Som jag nämnde ovan finns det mycket om denna app som gör det uppenbart att det byggdes med kodare i åtanke. Jag har en imponerande mängd flexibilitet att göra allt jag normalt gör för hand, de är bara i ett format som är lite lättare att följa.
Vad tror du? Tycker du om verktyg som syftar till att hjälpa dig att utföra komplexa uppgifter lite enklare eller föredrar du puristruten med endast kodning för hand?