Styla en knapp

Knappen är ett viktigt designelement på hemsidor och uppmanar oftast till någon typ av handling. En knapp kan tyckas simpel, men vi vågar hävda att knappen är det totalt motsatta. Visste du att du kan animera din knapp, styla den i regnbågens färger eller få den att se ut som en blomma? Allt är möjligt och vi är nyfikna på att se just din kreation!

Det här behöver du

Du behöver en kodeditor, vi rekommenderar Visual Studio code som är helt gratis att använda och går att ladda ned här.

1. Så här startar du

Ladda ned kodfilerna här till din email och öppna i din kodeditor. Inuti filerna hittar du vidare instruktioner och kommentarer om hur du går tillväga för att lösa utmaningen, i nästa stycke hittar du dessutom grymma tips och trix!

2. Tips & trix

Börja att läsa på om basen till knappar på W3 Schools här.

Testa på att applicera animering på din knapp, läs mer om detta här.

Kolla in dessa knappar med medföljande kod för att se möjligheterna 😍 .

3. Inspiration

Cornelia gick från Motion designer till att animera i kod.

Technigo-studenten Cornelia jobbade tidigare med animationer i Adobe After effects, men valde att byta karriär till frontend-utvecklare. Det betyder inte att det är slutanimerat, men animering i en annan form. Läs om hur Cornelia upplever skillnaden och se exempel på vad hon har animerat hittills i bootcampet.

👉 Läs hela intervjun med Cornelia här

4. Dela din lösning

Självklart vill vi se din lösning, dela den gärna på vår Instagram under hashtaggen #kodutmaningen. Och du, passa på att utmana din vän – dela kodutmaningen 💪.