Poga ir būtiska HTML sastāvdaļa, kas veic dažādus uzdevumus. Izmantojot CSS, varat izveidot pogu un veidot tās stilu. Ir dažādi veidi, kā noformēt pogu, piemēram, pogas krāsošanu, izmēru maiņu, virzīšanu kursorā un daudz ko citu.

Šajā rakstā mēs vispirms uzzināsim, kā izveidot pogu un pēc tam mainīt pogas krāsu, virzot kursoru.

Sāksim!

Kā mainīt pogas krāsu, novietojot kursoru CSS?

CSS, ' :virziet kursoru ” tiek izmantots, lai mainītu pogas krāsu, virzot kursoru. ' :virziet kursoru ” ir pseidoklase, kas ļauj mainīt HTML elementu uzvedību, kad uz tā tiek virzīts kursors, piemēram, tādus elementus kā saites, pogas, attēli un daudz ko citu.

Sintakse :virziet kursoru ir sniegts zemāk.

Sintakse

Iepriekš norādītajā sintaksē ' a ” attiecas uz HTML elementu, kur “ :virziet kursoru ” tiek piemērots. Izmantojot CSS, varat iestatīt HTML elementu virzīšanas uzvedību, piemēram, elementa krāsu, izmēru un platumu.

1. darbība: izveidojiet Div un Button

Vispirms HTML mēs izveidosim div un pievienosim virsrakstu ar

un pogu, izmantojot tagu. Šeit mēs piešķirsim pogas klases nosaukumu kā ' btn ' un pogas teksts kā ' Virziet kursoru virs manis ”.

HTML

Iepriekš minētā koda rezultāts ir norādīts zemāk. Varat redzēt, ka virsraksts un poga ir izveidoti:

Tagad pārejiet uz CSS, lai veidotu div un pogu pa vienam.

2. darbība: stila poga un dal

Vispirms izveidosim izveidotā konteinera stilu, izmantojot “ div ”. Pēc tam mēs iestatīsim div augstumu kā ' 250 pikseļi ' un fona krāsa kā ' rgb(199, 173, 192) ”. Mēs arī izmantosim robežu, lai pielāgotu div apmali, platums kā ' 5 pikseļi ”, stils kā “ ciets ”, un krāsa kā “ rgb(40, 2, 55) ”.

CSS

Tālāk norādītā izvade norāda, ka pievienotais stils ir veiksmīgi lietots div:

Nākamajā darbībā mēs izveidosim pogas stilu, izmantojot CSS.

Tagad mēs izveidosim pogas stilu, izmantojot “ .btn ”, lai piekļūtu pogai, kas izveidota HTML valodā. Pēc tam mēs paslēpsim pogas apmali, iestatot “ neviens ” kā pierobežas īpašuma vērtību. Pēc tam mēs pielāgosim fonta lielumu uz ' liels ' un pogas polsterējums uz ' 10 pikseļi ”, lai izveidotu atstarpes starp pogas saturu un pogas apmali. Beigās mēs iestatīsim teksta un fona krāsu kā ' rgb(50, 0, 54) ' un ' rgb(193, 54, 135) ”:

Tagad pogai ir izveidots šāds stils:

Tālāk mēs pielietosim ' :virziet kursoru ”, lai mainītu pogas krāsu, novietojot kursoru.

3. darbība. Mainiet pogas krāsu, virzot kursoru

Tagad mēs izmantosim ' .btn:hover ”, lai saistītu pogu ar kursora pseidoklases elementu. Rezultātā kursors tiks piemērots pogai. Tālāk mēs iestatīsim pogas fona krāsu un teksta krāsu kā ' rgb(66, 2, 41) ' un ' rgb(119, 255, 0) ”. Šīs krāsas tiks piemērotas pogai, kad peles kursoru novietos virs tās:

Tālāk sniegtajā izvadē var redzēt, ka pogas krāsa tiek mainīta, kad pele tiek virzīta uz tās:

Tieši tā! Mēs esam izskaidrojuši metodi, kā mainīt pogas krāsu, virzot kursoru, izmantojot CSS.

Secinājums

Lai mainītu pogas krāsu, novietojot kursoru, ' :virziet kursoru ” tiek izmantots pseidoklases elements. Lai to izdarītu, saistiet pogu ar :hover un iestatiet pogas krāsu, kas mainīsies, kad uz tās novietosim kursoru. Šajā rakstā mēs esam izskaidrojuši metodi, kā mainīt pogas krāsu, novietojot kursoru, un snieguši tās piemēru.