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.
Få hjälp
Gå med i vår Slack kanal och få hjälp av hela vårt community och hjälp coacher. Gå med 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 boot campet.
4. Dela din lösning!
Självklart vill vi se din lösning, dela den gärna på vår Instagram under hashtaggen #kodutmaningen eller i vår Slack-kanal här.
Och du, passa på att utmana din vän - dela kodutmaningen 💪.
Grymt jobbat, vilken utmaning! 🎉👏
I samarbete med
Tjejer Kodar är ett initiativ organiserat av Technigo AB.
Org. nr 559051-8030, Åsögatan 122, 116 24 Stockholm
Kontakt på hello@tjejerkodar.se