Tlačítka jsou nedílnou součástí mnoha webových stránek a aplikací. Používají se k uživatelské interakci a upoutání pozornosti uživatele. Jedním ze způsobů, jak udělat tlačítko zajímavější a atraktivnější, je jeho změna barvy při namíření nebo kliknutí. V tomto článku se podíváme na tři jednoduché způsoby implementace této funkce pomocí CSS.
Prvním způsobem je použití pseudoklasů: hover a: active. Pseudoklasse: hover se používá, když je kurzor myši umístěn na tlačítko. Barvu pozadí a barvu textu tlačítka můžeme změnit zadáním nových hodnot vlastnostem background-color a color. Když se tlačítko stiskne, použije se pseudoklasse :active. Pro tento stav můžeme také změnit barvu pozadí a barvu textu.
Druhým způsobem je použití CSS proměnných. Můžeme vyhlásit proměnné pro barvy, které chceme použít pro tlačítko, a poté je použít ve všech potřebných vlastnostech. Poté můžeme vytvořit dvě několik stylů pro pseudoklasy: hover a: active a použít hodnoty proměnných na tyto stavy. Tento způsob usnadňuje změnu barev tlačítka změnou hodnot proměnných.
Třetím způsobem je použití přechodů a animací. Vlastnost transition můžeme použít k hladkému přechodu z jedné barvy do druhé, když najedete nebo kliknete. Také můžeme použít vlastnost animation k vytvoření složitějších animací pro změnu barvy tlačítka. Nastavením délky trvání a dalších parametrů animace můžeme dosáhnout různých efektů.
Změna barvy tlačítka v CSS: 3 způsoby
Tlačítka s měnící se barvou mohou na vašem webu přidat zajímavosti a reproduktory. V CSS existuje několik způsobů, jak dosáhnout tohoto efektu, níže jsou uvedeny tři nejběžnější metody:
-
Použití pseudoklasu: hover pro změnu barvy tlačítka, když na něj najedete: Příklad kódu:
.button:hover
.button .button:hover
const button = document.querySelector('.button');button.addEventListener('click', function() );Vyberte si nejvhodnější metodu pro změnu barvy tlačítka pro vaši situaci a užijte si výsledek!
Použití CSS třídy
Například pro vytvoření třídy s názvem "button-red" a červenou barvou tlačítka může kód vypadat takto:
.button-red
Poté přiřadit tuto třídu tlačítku pomocí atributu . Například:
Nyní bude mít tlačítko červené pozadí, protože je použita třída CSS "button-red". V případě potřeby můžete vytvořit třídy s různými barvami a aplikovat je na různé prvky tlačítek.
Použití pseudoklasu :hover
Chcete-li vytvořit měnící se barvu tlačítka pomocí pseudoklasu :hover musíte nastavit dvě různé barvy tlačítka: jednu barvu pro běžný stav tlačítka a druhou barvu pro stav, když na tlačítko najedete.
.button .button:hover
V tomto příkladu bude tlačítko mít červenou barvu v normálním stavu a zelenou při přejetí na tlačítko.
Pseudoklass: hover lze použít pro různé efekty webového designu, jako je změna barvy, velikosti nebo stylu prvku, když na něj umístíte kurzor. Umožňuje vytvářet interaktivní prvky na webové stránce a zvyšovat jejich uživatelskou dostupnost.
Použití pseudoklasu: hover je jedním z nejjednodušších způsobů, jak přidat interaktivitu k tlačítkům a dalším prvkům na webové stránce. Umožňuje vám vytvářet stylová a efektní tlačítka, která upoutají pozornost uživatelů a zlepší uživatelský zážitek.