Přechodová tlačítka staly se oblíbeným prvkem designu rozhraní, který upoutal pozornost uživatelů svými plynulými přechody barev. Dodávají webům jedinečnost a styl a vědět, jak takový efekt vytvořit, je pro webové vývojáře užitečné.
V tomto článku se podíváme na to, jak vytvořit tlačítko přechodu pomocí CSS.
Chcete-li vytvořit přechodové tlačítko, musíte použít vlastnost background s linear-gradient. Lineární Přechod umožňuje hladký přechod barev z jedné hodnoty na druhou.
Tlačítko Přechod v CSS: jednoduchý návod
Tlačítka s přechodovým designem mohou na webovou stránku přidat zajímavý vizuální efekt a dodat jí stylový vzhled. V této příručce se podíváme na to, jak vytvořit takové tlačítko pomocí CSS.
Pro začátek vytvoříme jednoduchou HTML strukturu pro tlačítko:
V CSS můžeme použít vlastnost background k zadání přechodu pozadí tlačítka. K tomu můžeme využít funkci linear-gradient:
.gradient-button
background: linear-gradient(to right, #FFA500, #FF4500);
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
Ve výše uvedeném příkladu jsme pomocí funkce linear-gradient nastavili přechod z barvy #ffa500 na barvu #ff4500. Můžete také upravit směr přechodu změnou hodnoty argumentu to right.
Poté označíme barvu textu na tlačítku pomocí vlastnosti color. V tomto případě jsme pomocí #ffffff nastavili bílou barvu textu.
Vlastnost border: none odstraní rámeček u tlačítka a vlastnost padding nastaví odsazení kolem textu uvnitř tlačítka.
Pomocí vlastnosti border-radius nastavíme zaoblení rohů tlačítka, díky čemuž je jeho tvar atraktivnější.
Konečně vlastnost cursor:pointer nastaví tvar kurzoru, když najede na tlačítko jako šipka, která ukazuje na možnost kliknutí.
Po aplikaci všech těchto stylů bude vaše tlačítko představovat atraktivní přechodový prvek webové stránky připravený k použití.
Krok 1: Vytvořte značení HTML
Nejprve vytvoříme tlačítko v HTML značení, které budeme stylizovat pomocí přechodu CSS. K tomu použijeme značku a zadáme jí text, který se zobrazí na tlačítku.
Zde je příklad kódu:
Text tlačítka můžete změnit podle svého uvážení.
Krok 2: Aplikujte styly na tlačítko pomocí CSS
Nyní, když máme tlačítko ve značení, přidejte styly pomocí CSS, abyste z něj udělali přechodové tlačítko.
V CSS použijeme vlastnost background Chcete-li nastavit přechodové pozadí tlačítka. Můžeme použít lineární gradient, který je vytvořen pomocí funkce linear-gradient(). Tato funkce má dvě možnosti: směr přechodu a sadu barev.
Můžeme například vytvořit přechod, který jde shora dolů, od bílé po černou, následovně:
.buttonTento přechod půjde od horního bodu tlačítka ke spodnímu, počínaje bílou a konče černou barvou.
Tento přechod však můžeme upravit přidáním dalších barev. Můžeme například vytvořit přechod složený z bílé, šedé a černé:
.buttonNyní bude přechod pokračovat od horního bodu tlačítka ke spodnímu, počínaje bílou, poté přechodem do šedé a konče černou barvou.
Kromě přechodu můžeme také přidat další styly, jako je barva textu, velikost a styl písma, odsazení atd., abychom upravili vzhled tlačítka podle našich představ.
Zde je úplný příklad stylů, které lze použít na tlačítko:
.buttonTyto styly můžete přizpůsobit podle svého uvážení a vytvořit tak jedinečný vzhled přechodového tlačítka.
Krok 3: Přidejte animace pro jasnější efekt
Aby bylo naše tlačítko ještě atraktivnější, můžeme přidat animace. K tomu v CSS používáme vlastnost transition. Pomocí něj můžeme nastavit čas a typ animace.
V tomto příkladu jsme nastavili animaci pro změnu pozadí tlačítka, když na něj najedete kurzorem. První hodnota vlastnosti transition označuje proměnnou vlastnost (v našem případě je to pozadí), druhá hodnota udává čas (0.3 s) a třetí hodnota určuje typ animace (ease).
Nyní, když umístíte kurzor na tlačítko, jeho pozadí se plynule změní z jedné barvy na druhou, což tlačítku dodá další efekt.