Knapper (buttons) med CSS3

CSS3 giver en masse muligheder for at lave animationer og andre grafiske virkemidler, så ved ikke at betragte en knap som noget man absolut skal lave med tag'en BUTTON, men blot et stykke grafik man klikker på, får man rige muligheder for at udfolde sin kreativitet.

Lad det være sagt med det samme: Denne type knapper er ikke for begyndere eller utålmodige personer. Nogle løsninger er bestemt lettere end andre, men i forhold til at bruge en tag og sætte et par attributter, som man kan med langt det meste HTML, er dette at betragte som et trin op i sværhedsgrad.

På siden her gennemgår jeg en række eksempler, som man kan bruge til inspiration. Fordi dette er en kreativ øvelse, mere end teknik, er det umuligt at gennemgå emnet til fulde. Rundt omkring på nettet kan man finde en masse andre eksempler, som man ligeledes kan bruge.

En af de effekter man kan lave, er rullende baggrundsfarve. Effekten benytter sig af to dele: en keyframe-animation, her kalder vi den ChangeBG, hvor vi sætter farver og hvornår i tidsforløbet farveændringen skal ske. Denne skal være i style sheetet og ser således ud:



Knappen vi skal bruge er blot en almindelig DIV, som skal styles. Her ser koden der skal på siden således ud:



Stylingen, som er klassen Button, ser således ud:



Her specificerer man hvilken animation der skal køres, og variabler dertil, i linje 1, og resten er blot styling af en DIV som vi kender det med størrelse udseende. På skærmen kommer det til at se således ud:

En effekt man relativt let kan lave er illusionen af at knappen synker ned, når man holder musen over. Effekten består af tre dele. Det første vi skal bruge er selve knappen på siden. Her bruger vi blot en almindelig DIV, som skal styles. Her ser koden der skal på siden således ud:



Stylingen, som er klassen Button, ser således ud:



Her specificerer man transition og variabler dertil, i linje 1, og resten er blot styling af en DIV som vi kender det med størrelse udseende. Transition er det der sker når musen holdes over, så vi skal have specificeret background-color og box-shadow ved :hover. Den kode ser således ud:



På skærmen kommer det færdige resultat til at se således ud:

Ved at kombinere transform:rotateY() og transition kan man få emnet til at dreje om sin egen akse, i dette tilfælde y-aksen. Effekten består af tre dele. Det første vi skal bruge er selve knappen på siden. Her bruger vi blot en almindelig DIV, som skal styles. Her ser koden der skal på siden således ud:



Stylingen, som er klassen Button, ser således ud:



Her specificerer man først transform, dvs. defaulværdien for rotationsvinklen, og derefter transition, dvs. hvor hurtigt rotationen i begge retninger skal være. Bemærk, at man tidligere ikke behøvede præfix til transform og transition, så hvis rotationen har fungeret, men er holdt op med at fungere, kan dette være årsagen. Resten er blot styling af en DIV som vi kender det med størrelse udseende. Transition er det der sker når musen holdes over, så vi skal have specificeret rotationen ved :hover. Den kode ser således ud:



Her er rotationen sat til en hel omgang, det kan man selvsagt rette til efter ønske. Ved at have en defaultværdi for rotationen, vil emnet rotere tilbage til udgangspositionen, dvs. ved mouse over drejer teksten en omgang, og når man fjerner pointeren, drejer teksten tilbage på plads. På skærmen kommer det færdige resultat til at se således ud:



Hvis man vil, kan man i sin transform også rotere om x-aksen med rotateX, så ser det således ud:



Ligeledes kan man rotere om z-aksen med rotateZ, så ser det således ud:

En af de mere elegante måder at understrege på, er ved at lave en understregning der ruller ud i fuld størrelse. Løsningen består af fem dele. Det første man skal bruge er knappen. Hvor de foregående eksempler blot krævede en DIV, så kræver denne løsning, at man både har selve knappen og en separat DIV til effekten. Klassen for knappen kalder vi Button og den DIV vi skal brige til effekten kalder vi ButtonFace. Den del ser således ud:



Stylingen, som er klassen Button, ser således ud:



Stylingen, som er klassen ButtonFace, ser således ud:



Det næste der er brug for, er hvad der sker når musen er over. Lige til dette eksempel sker der ikke noget, men det er her man har farveskift osv. med mouse over. Derfor kommer det til at se således ud:



Det næste der kommer, er det der får det hele til at fungere. På samme måde som man har selektoren :hover, har man selektoren :before, som gør at man kan indsætte noget før en tag, klasse eller ID. Det er her man definerer linjen og skjuler den. Den kode ser således ud:



Vil man have andre farver, størrelser eller placeringer på understregningen eller hastigheden hvormed linjen ruller ud, er det her der skal justeres.

Derudover skal vi bruge en kombination af hover og before, så linjen bliver synliggjort ved mouse over:



Koden er nu klar. På skærmen kommer det færdige resultat til at se således ud:



At linjen starter fra midten og bevæger sig ud til begge sider er default. Vil man have linjen til at starte f.eks. i venstre side, skal man til .ButtonFace:before tilføje linjen transform-origin: bottom left. Så ser det således ud: