HTML & CSS

OPGAVE TIL HTML & CSS – BEGYNDER – KNAPPER

Opgave 5

Opgave 5 – Del 1

Star med at sætte en side op. Følg evt. INTRO – OPGAVE 1 hvis du har glemt hvordan.

Hvis du er i Codepen, skal du blot sætte div boksen ind i HTML boksen.

Lav et nyt dokument
Lav 1 div bokse i din body
Nu skal du laven et < button > </ button> tag inde i din div boks
Således her:
<div >
< button > Klik Her < /button >
</div>

Giv din button(knap) klassen button.
Således:
< button class=”button”> Klik Her < /button >

Opgave 5 – Del 2

Gå op i din CSS < style > </style > og lav .button klassen inde i mellem:

.button {
float: left;
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 50px;
box-shadow: 0 9px #999;
}

Vi beslutter her at den placeres flydende/float til venstre/left. Den skal have str. 24px tekst og teksten skal være i midten/center. Vi siger også at musen skal ændre udseende til en pegefinger/pointer.

Der skal dog ikke være en linje uden om Teksten skal være hvid og knappen skal lilla. Men du vælger selv en farverne 😉

Så skal den have en radius ved hjørnerne og en skygge/shadow.

Opgave 5 – Del 3

FARVER:

Farver kan skrives på mange måder her er valg mulighederne:
#FFF
#FFFFFF
#000000
white
rgba(255,0,0,1)   r=rød, g=grøn, b=blue og a=opasitet/gennemsigtighed

Gennemsigtighed går fra 0-1. Hvor 0 er ingen ting og 1 er fuld farve. Skal du ramme 50% så er det 0.5 der skal stå(det er vigtigt det er med punktum)

Opgave 5 – Del 4

Nu skal vi kode en hover til knappen.

Hover er betegnelsen for mouse-over-effect altså på dansk nå musen bevæger sig ind over knappen:

Gå op i din CSS og tilføj disse to klasser efter :

.button:hover {
  background-color: black;
}

.button:active {
  background-color: turquoise;
  box-shadow: 0 5px #666;
  transform: translateY(2px);
}

box-shadow: er sat til 0 med 5px i grå.
transform: translateY: med 2 px(pixel). det beskriver at knappen sænker sig, går 2 px ned på Y-aksen(lodret)