Painike on olennainen osa HTML:ää, joka suorittaa erilaisia ​​tehtäviä. CSS:n avulla voit suunnitella ja muotoilla painikkeen. Painikkeen suunnitteluun on erilaisia ​​tapoja, kuten painikkeen värittäminen, koon muuttaminen, leijuminen ja monet muut.

Tässä artikkelissa opimme ensin luomaan painikkeen ja muuttamaan sitten painikkeen väriä viemällä hiiri.

Aloitetaan!

Kuinka muuttaa painikkeen väriä hiirellä CSS:ssä?

CSS:ssä ' :hover ' käytetään painikkeen värin vaihtamiseen hiiren ollessa päällä. ' :hover ” on pseudoluokka, joka mahdollistaa HTML-elementtien, kuten linkkien, painikkeiden, kuvien ja monien muiden elementtien, käyttäytymisen muuttamisen, kun hiiren osoitin sen päälle.

Kohteen syntaksi :hover on annettu alla.

Syntaksi

Yllä annetussa syntaksissa ' a ' viittaa HTML-elementtiin, jossa ' :hover ” sovelletaan. CSS:ssä voit määrittää HTML-elementtien hover-käyttäytymisen, kuten elementin värin, koon ja leveyden.

Vaihe 1: Luo Div ja Button

HTML-koodiin luodaan ensin div ja lisätään otsikko, jossa on

ja painike tagin avulla. Tässä annamme painikkeen luokan nimeksi ' btn ' ja painikkeen teksti ' Vie hiiri päälleni ”.

HTML

Edellä mainitun koodin tulos on esitetty alla. Näet, että otsikko ja painike on luotu:

Siirry nyt CSS:ään tyyliäksesi div ja painikkeet yksitellen.

Vaihe 2: Tyylipainike ja jako

Ensin tyyliimme luodun säilön käyttämällä ' div ”. Sitten asetamme div:n korkeudeksi ' 250 pikseliä ' ja taustaväri ' rgb(199, 173, 192) ”. Käytämme myös border-ominaisuutta säätämään div:n reunaa, leveys muodossa ' 5px ', tyylinä ' kiinteä ' ja värinä ' rgb(40, 2, 55) ”.

CSS

Alla oleva tulos osoittaa, että lisätty tyyli on otettu onnistuneesti käyttöön div:ssä:

Seuraavassa vaiheessa muotoilemme painikkeen tyyliä CSS:n avulla.

Nyt muokkaamme painikkeen tyyliä käyttämällä ' .btn ” päästäksesi HTML-kielellä luotuun painikkeeseen. Sen jälkeen piilotamme painikkeen reunan asettamalla ' ei mitään ” raja-omaisuuden arvoksi. Tämän jälkeen säädämme kirjasinkooksi ' suuri ' ja painikkeen täyttö kohtaan ' 10px ” luodaksesi välilyöntejä painikkeen sisällön ja painikkeen reunan väliin. Lopuksi asetamme tekstin ja taustan väriksi ' rgb(50; 0; 54) ' ja ' rgb(193, 54, 135) ':

Painikkeen tyyli on nyt muotoiltu:

Lisäksi aiomme soveltaa ' :hover ” muuttaaksesi painikkeen väriä, kun osoitin on päällä.

Vaihe 3: Muuta painikkeen väriä osoitin

Nyt käytämme ' .btn:hover ” linkittääksesi painikkeen leijuvan pseudoluokkaelementtiin. Tämän seurauksena osoitin siirtyy painikkeeseen. Seuraavaksi asetamme painikkeen taustaväriksi ja tekstin väriksi ' rgb(66; 2; 41) ' ja ' rgb(119; 255; 0) ”. Näitä värejä käytetään painikkeessa, kun hiiren osoitin viedään sen päälle:

Alla olevassa tulosteessa näet, että painikkeen väri muuttuu, kun hiiri vie sen päällä:

Se siitä! Olemme selittäneet menetelmän muuttaa painikkeen väriä hiirellä CSS:n avulla.

Johtopäätös

Jos haluat muuttaa painikkeen väriä, kun osoitinta pidetään, :hover ” pseudoluokan elementtiä käytetään. Voit tehdä tämän yhdistämällä painikkeen :hover-painikkeella ja määrittämällä painikkeen värin, joka muuttuu, kun viemme hiiren sen päällä. Tässä artikkelissa olemme selittäneet menetelmän muuttaa hiiren painikkeen väriä ja antaneet siitä esimerkin.