Kā izveidot pogu mājas lapā ar CSS+HTML?

DG WEB FACTORY » Pamācības » Kā izveidot pogu mājas lapā ar CSS+HTML?

1. Vispirms izveidojiet a href atribūtu Jūsu HTML dokumentā, kurā vēlaties ievietot pogu. Href norāda, ka tiks izmantota saite (URL). Href vērtība būs saite uz, kuru aizies lietotājs, nospiežot pogu. Piemērā parādīts, ka poga aizved uz google.com mājas lapu.

<a href=”https://www.google.com/”></a>

2. Pēc tam pievienojiet tekstu, ko vēlaties attēlot pogā:

<a href=”https://www.google.com/”> <p>Apskatīt</p></a>

3. Ja vēlaties, lai saite atverās jaunā cilnē interneta pārlūkā, tad pievienojiet mērķi (target un norādiet vērtību blank.

<a href=”https://www.google.com/” target=”blank”> <p>Apskatīt</p></a>

4. Lai pievienotu dizainu, jāpievieno CSS klase, piemērā izveidota CSS klase ar nosaukumu btn:

<a href=”https://www.google.com/” target=”blank” class=’btn’> <p>Apskatīt</p></a>

HTML kods:

5. Pēc tam atveriet CSS stila failu un pievienojiet klasi btn un īpašības ar vērtībām šai klasei:

.btn {
cursor: pointer;
background: #d40404;
border-radius: 6px;
width: 120px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin:2em 0em;
text-decoration:none;
}

cursor – apzīmē, kas uzrādīsies, kad lietotājs uzies uz bloka ar peles kursoru. Vērtība pointer norāda, to, ka uzsrādīsies “rociņa”, kas ļauj vieglāk lietotājam saprast, ka tā ir klikšķināma saite.

background- ir fona krāsa un kā vērtība norādīts heksadecimālais krāsas nosaukums.

border-radius ir stūru rādius elementam, ar to var noapaļot stūrus. opx ir nenoapaļoti stūri, savukārt jo vairāk px, jo vairāk noapaļoti.

width un height ir elementa augstums un platums, kas šajā gadījumā norādīts pikseļos.

display:flex var izmantot, lai attēlotu elementus centrā pa vidu gan vertikāli, gan horizontāli. Display īpašība tiek izmantota, lai noteiktu kā elements tiek attēlots. justify-content: center; un align-items: center; elemeti tiek iecentrēti, lai teksts būtu pa vidu.

margin ir attālums (atstarpe) līdz nākamajam elementam. 2em – attālums augšā un apakšā un 0em attēlums no labās un kreisās puses. To var pierakstīt arī šādi margin:2em 0em 2em 0em; (margin:augšā pa labi apakšā pa kreisi). Bet Šajā gadījumā var izmantot īsāku pierkastu margin:2em 0em;. Jo pirmais parametrs apzīmē augšu un apakšu (kas ir vienāds šajā gadījumā) un otrais-sānu attālumus (kas arī ir vienādi piemērā).

6. Ar .btn p tiek noteikts kā izskatīsies paregrāfs, kas atrodas iekš a kam ir klase btn.

font-size ir fonta izmērs, kas noteikts šajā gadījumā elementos (em), 1em lielumā. color ir teksta krāsa, kas noteika balta.

.btn p{
font-size: 1em;
color: #ffff;

}

CSS kods:

Rezultāts:

Autors: Dagnija Ivdra