Un buton este o parte fundamentală a HTML care îndeplinește diverse sarcini. Folosind CSS, puteți proiecta și stila butonul. Există diferite moduri de a proiecta butonul, cum ar fi colorarea butonului, redimensionarea, trecerea cu mouse-ul și multe altele.

În acest articol, mai întâi, vom învăța cum să creăm un buton, apoi să schimbăm culoarea unui buton la trecerea cursorului.

Să începem!

Cum se schimbă culoarea butonului la Hover în CSS?

În CSS, „ :planare ” este folosit pentru a schimba culoarea butonului la hover. „ :planare ” este o pseudo-clasă care permite modificarea comportamentului elementelor HTML atunci când trece mouse-ul peste el, cum ar fi elemente precum linkuri, butoane, imagini și multe altele.

Sintaxa lui :planare este prezentat mai jos.

Sintaxă

În sintaxa furnizată mai sus, „ A ” se referă la elementul HTML în care „ :planare ' este aplicat. În CSS, puteți seta comportamentul de hover al elementelor HTML, cum ar fi culoarea, dimensiunea și lățimea elementului.

Pasul 1: Creați Div și Buton

În HTML, mai întâi, vom crea un div și vom adăuga un titlu cu

și un buton folosind o etichetă. Aici, vom atribui numele clasei butonului ca „ btn ” și textul butonului ca „ Plasează pe mine ”.

HTML

Rezultatul codului de mai sus este prezentat mai jos. Puteți vedea că titlul și butonul sunt create:

Acum, treceți la CSS pentru a stila div-ul și butonul unul câte unul.

Pasul 2: Butonul de stil și Div

Mai întâi, vom stila containerul creat folosind „ div ”. Apoi, vom seta înălțimea div-ului ca „ 250px ” și culoarea de fundal ca „ rgb(199, 173, 192) ”. De asemenea, vom folosi proprietatea border pentru a ajusta chenarul div-ului, lățimea ca „ 5px ”, stil ca “ solid ”, și colorează ca „ rgb(40, 2, 55) ”.

CSS

Rezultatul de mai jos indică faptul că stilul adăugat este aplicat cu succes pe div:

În pasul următor, vom stila butonul folosind CSS.

Acum, vom stila butonul folosind „ .btn ” pentru a accesa butonul care este creat în HTML. După aceea, vom ascunde chenarul butonului setând „ nici unul ” ca valoare a proprietății de frontieră. După aceea, vom ajusta dimensiunea fontului la „ mare ” și umplerea butonului la „ 10px ” pentru a crea spații între conținutul butonului și chenarul butonului. La final, vom seta culoarea textului și a fundalului ca „ rgb(50, 0, 54) ' și ' rgb(193, 54, 135) ”:

Butonul este acum stilat:

În continuare, vom aplica „ :planare ” pentru a schimba culoarea unui buton la trecerea cursorului.

Pasul 3: Schimbați culoarea butonului la trecerea cursorului

Acum, vom folosi „ .btn:hover ” pentru a lega butonul cu elementul pseudo-clasă hover. Ca rezultat, hover va fi aplicat butonului. Apoi, vom seta culoarea de fundal și culoarea textului butonului ca „ rgb(66, 2, 41) ' și ' rgb(119, 255, 0) ”. Aceste culori vor fi aplicate butonului când trece mouse-ul peste el:

În rezultatul furnizat mai jos, puteți vedea că culoarea butonului este schimbată atunci când mouse-ul trece pe el:

Asta e! Am explicat metoda de schimbare a culorii butonului la trecerea cursorului folosind CSS.

Concluzie

Pentru a schimba culoarea unui buton la trecerea cursorului, butonul „ :planare ” se folosește elementul pseudo-clasă. Pentru a face acest lucru, legați butonul cu :hover și setați culoarea butonului, care se va schimba când vom trece cu mouse-ul pe el. În acest articol, am explicat metoda de schimbare a culorii butonului la trecerea cursorului și am oferit un exemplu al acesteia.