Nupp on HTML-i põhiosa, mis täidab erinevaid ülesandeid. CSS-i kasutades saate nuppu kujundada ja stiilida. Nupu kujundamiseks on erinevaid viise, näiteks nupu värvimine, suuruse muutmine, hõljutamine ja palju muud.

Selles artiklis õpime kõigepealt nuppu looma ja seejärel kursorit hõljutades nupu värvi muutma.

Alustame!

Kuidas CSS-is kursoril nupu värvi muuta?

CSS-is ' :hõljuma ” kasutatakse nupu värvi muutmiseks hõljutamisel. “ :hõljuma ” on pseudoklass, mis võimaldab muuta HTML-i elementide käitumist, kui hiirekursor selle peal liigub, nagu näiteks lingid, nupud, pildid ja palju muud.

Süntaks :hõljuma on toodud allpool.

Süntaks

Ülaltoodud süntaksis ' a ' viitab HTML elemendile, kus ' :hõljuma ” rakendatakse. CSS-is saate määrata HTML-i elementide hõljumise käitumise, näiteks elemendi värvi, suuruse ja laiuse.

1. samm: looge Div ja nupp

Esmalt loome HTML-is div ja lisame sildi abil pealkirja

ja nupuga. Siin määrame nupu klassi nimeks ' btn ” ja nupu tekst „ Hõljutage kursorit minu peal ”.

HTML

Ülalmainitud koodi tulemus on toodud allpool. Näete, et pealkiri ja nupp on loodud:

Nüüd liikuge CSS-i, et stiilida div ja nupp ükshaaval.

2. samm: stiilinupp ja jaotis

Esiteks kujundame loodud konteineri stiili, kasutades ' div ”. Seejärel määrame diivi kõrguseks ' 250 pikslit ja taustavärv on ' rgb(199, 173, 192) ”. Samuti kasutame atribuuti border, et reguleerida div piiri, laius kui ' 5 pikslit ”, stiil kui „ tahke ' ja värv on ' rgb(40, 2, 55) ”.

CSS

Allpool antud väljund näitab, et lisatud stiil on div-le edukalt rakendatud:

Järgmises etapis kujundame nupu stiili CSS-i abil.

Nüüd kujundame nupu stiili kasutades ' .btn ', et pääseda juurde HTML-is loodud nupule. Pärast seda peidame nupu äärise, määrates ' mitte ühtegi ” piirikinnisvara väärtusena. Pärast seda kohandame fondi suuruseks ' suur ' ja nupu polsterdus ' 10 pikslit ” nupu sisu ja nupu äärise vahele tühikute loomiseks. Lõpuks määrame teksti ja tausta värviks ' rgb(50, 0, 54) ” ja „ rgb(193, 54, 135) ”:

Nupp on nüüd kujundatud järgmiselt:

Lisaks rakendame ' :hõljuma ”, et muuta kursorit hõljuva nupu värvi.

3. toiming: muutke kursorit kasutades nupu värvi

Nüüd kasutame ' .btn:hover ”, et linkida nupp hõljuva pseudoklassi elemendiga. Selle tulemusena rakendatakse nupule kursorit. Järgmisena määrame nupu taustavärviks ja tekstivärviks ' rgb(66, 2, 41) ” ja „ rgb(119, 255, 0) ”. Need värvid rakendatakse nupule, kui hiirekursor selle peal liigub:

Allpool esitatud väljundis näete, et nupu värv muutub, kui hiir sellele hõljub:

See on kõik! Oleme selgitanud meetodit, kuidas muuta nupu värvi hõljutamisel CSS-i abil.

Järeldus

Kursorit hõljutades nupu värvi muutmiseks kuvatakse :hõljuma ” kasutatakse pseudoklassi elementi. Selleks linkige nupp nupuga :hover ja määrake nupu värv, mis muutub, kui sellele kursorit hõljutame. Selles artiklis oleme selgitanud kursori hõljutamisel oleva nupu värvi muutmise meetodit ja toonud selle näite.