Tlačítko je základní součástí HTML, která plní různé úkoly. Pomocí CSS můžete navrhnout a upravit styl tlačítka. Existují různé způsoby, jak navrhnout tlačítko, jako je obarvení tlačítka, změna velikosti, umístění kurzoru a mnoho dalších.

V tomto článku se nejprve naučíme, jak vytvořit tlačítko, a poté změnit barvu tlačítka při najetí myší.

Začněme!

Jak změnit barvu tlačítka při najetí myší v CSS?

V CSS „ :vznášet se “ se používá ke změně barvy tlačítka při najetí myší. “ :vznášet se ” je pseudotřída, která umožňuje měnit chování prvků HTML, když na něj umístíte ukazatel myši, jako jsou prvky jako odkazy, tlačítka, obrázky a mnoho dalších.

Syntaxe :vznášet se je uveden níže.

Syntax

Ve výše uvedené syntaxi „ A '' odkazuje na HTML element, kde ' :vznášet se ' je použito. V CSS můžete nastavit chování při najetí myší na prvky HTML, jako je barva, velikost a šířka prvku.

Krok 1: Vytvořte Div a tlačítko

V HTML nejprve vytvoříme div a přidáme nadpis s

a tlačítko pomocí značky. Zde přiřadíme název třídy tlačítka jako „ btn “ a text tlačítka jako „ Postavte se na mě “.

HTML

Výsledek výše uvedeného kódu je uveden níže. Můžete vidět, že nadpis a tlačítko jsou vytvořeny:

Nyní přejděte do CSS a upravte styl div a tlačítko jeden po druhém.

Krok 2: Tlačítko Styl a Div

Nejprve nastylujeme vytvořený kontejner pomocí „ div “. Poté nastavíme výšku div jako „ 250 pixelů “ a barvu pozadí jako „ rgb(199, 173, 192) “. Vlastnost border použijeme také k úpravě okraje prvku div, šířka jako „ 5px “, styl jako „ pevný “ a barvu jako „ rgb(40, 2, 55) “.

CSS

Níže uvedený výstup znamená, že přidaný styl byl úspěšně aplikován na div:

V dalším kroku nastylujeme tlačítko pomocí CSS.

Nyní upravíme styl tlačítka pomocí „ .btn ” pro přístup k tlačítku, které je vytvořeno v HTML. Poté skryjeme okraj tlačítka nastavením „ žádný ” jako hodnotu vlastnosti hranice. Poté upravíme velikost písma na „ velký “ a odsazení tlačítka na „ 10 pixelů ” pro vytvoření mezer mezi obsahem tlačítka a okrajem tlačítka. Nakonec nastavíme barvu textu a pozadí jako „ rgb(50, 0, 54) ' a ' rgb(193, 54, 135) “:

Tlačítko je nyní ve stylu:

Dále uplatníme „ :vznášet se ” pro změnu barvy tlačítka při najetí myší.

Krok 3: Změňte barvu tlačítka při najetí myší

Nyní použijeme „ .btn:hover ” pro propojení tlačítka s prvkem pseudotřídy hover. V důsledku toho se na tlačítko použije kurzor. Dále nastavíme barvu pozadí a barvu textu tlačítka jako „ rgb(66, 2, 41) ' a ' rgb(119, 255, 0) “. Tyto barvy budou aplikovány na tlačítko, když na něj umístíte ukazatel myši:

V níže uvedeném výstupu můžete vidět, že barva tlačítka se změní, když na něj najedete myší:

A je to! Vysvětlili jsme metodu změny barvy tlačítka při najetí myší pomocí CSS.

Závěr

Chcete-li změnit barvu tlačítka při najetí myší, „ :vznášet se ” je použit prvek pseudotřídy. Chcete-li to provést, propojte tlačítko s :hover a nastavte barvu tlačítka, která se změní, když na něj najedeme. V tomto článku jsme vysvětlili metodu změny barvy tlačítka při najetí myší a uvedli jsme její příklad.