Tlačítka jsou prvky, které jsou nepostradatelné při vytváření interaktivních webových stránek. Někdy potřebujeme umístit tlačítko doprostřed na stránku nebo do bloku. Ale jak to udělat s CSS?
Existuje několik způsobů, jak zarovnat tlačítko uprostřed. Jedním z nich je použití vlastnosti text-align k vycentrování textu uvnitř nadřazeného prvku. Tato vlastnost však centruje pouze text, nikoli samotné tlačítko.
Účinnějším způsobem je použití flexboxu (ohebného kontejneru). Přidejte třídu k nadřazené položce tlačítka, nastavte pro ni vlastnost display: flex a nastavte hodnoty justify-content a align-items jako center. Tímto způsobem bude tlačítko vycentrováno horizontálně i vertikálně.
Obecné zásady vytváření tlačítek v CSS
Vytváření tlačítek v CSS je založeno na použití kombinace stylů a pseudoelementů, které vám umožní přidat efekty klepnutí, animace a další interaktivní funkce.
Zde je několik obecných zásad, které mohou pomoci při vytváření tlačítek v CSS:
1. Určete styl tlačítka: Začněte definováním stylu tlačítka, včetně barvy na pozadí, barvy textu, písma a dalších vlastností, aby tlačítko vypadalo atraktivně a odpovídalo celkovému designu vašeho webu.
2. Pomocí pseudoelementů vytvořte efekty klepnutí: Přidejte pseudoelementy: hover a :active, abyste vytvořili naváděcí efekt a stisknutí tlačítka. Můžete například změnit barvu pozadí nebo textu tlačítka, když na něj najedete, aby byl interaktivnější.
3. Přidejte animace: Pokud chcete, aby se tlačítko animovalo, když je stisknuto nebo když na něj najedete, můžete použít animaci CSS. Můžete například stisknout tlačítko pulzující nebo změnit jeho velikost.
4. Umístěte tlačítko na správné místo: Chcete-li umístit tlačítko doprostřed, můžete použít styl "text-align: center" pro rodičovskou položku k vodorovnému zarovnání tlačítka. Chcete-li tlačítko Zarovnat svisle, můžete pro rodičovskou položku použít vlastnost "line-height" a nastavit jej na stejnou výšku tlačítka.
Vytváření krásných a funkčních tlačítek v CSS může vyžadovat určité úsilí a experimenty, ale dodržováním těchto obecných zásad můžete vytvořit tlačítka, která upoutají pozornost uživatelů a učiní váš web interaktivnějším.
Stylizace základního prvku
Když chceme vytvořit tlačítko v CSS, musíme použít základní prvek , jako je prvek nebo, a použít na něj styly, aby vypadal jako tlačítko.
Existuje několik způsobů, jak stylizovat základní prvek, včetně změny jeho barvy pozadí, textu, velikosti a tvaru. Zde jsou některé základní styly, které lze použít:
Barva pozadí: barvu pozadí tlačítka lze změnit pomocí vlastnosti background-color. Například, background-color: blue; nastaví modrou barvu pozadí.
Barva textu: můžete změnit barvu textu tlačítka pomocí vlastnosti color. Například, color: white; nastaví bílou barvu textu.
Velikost: velikost tlačítka lze změnit pomocí vlastnosti width a height. Například, width: 100px; a height: 50px; nastaví šířku 100 pixelů a výšku 50 pixelů.
Formulář: tvar tlačítka lze změnit pomocí vlastnosti border-radius. Například, border-radius: 5px; přidá zaoblené rohy k tlačítku.
Toto jsou pouze některé základní styly, které lze použít při stylizaci tlačítka v CSS. Konečný výsledek závisí na vašich potřebách a preferencích návrhu.
Použití Polohování k zarovnání tlačítka
Pro zarovnání tlačítka uprostřed lze použít polohování pomocí CSS.
Nejjednodušší způsob, jak to udělat, je nastavit blok obsahující tlačítko, následující styly:
Poté uvnitř tohoto kontejneru vytvořte tlačítko:
Nyní bude tlačítko zarovnáno uprostřed uvnitř kontejneru. Styly tlačítka můžete změnit, jak chcete.
Pokud chcete přesně umístit tlačítko bez použití flexboxu, můžete použít jiné metody, jako je absolutní umístění nebo použití tabulek. Tyto metody mohou být složitější, ale umožní vám přesnější umístění tlačítka, pokud to potřebujete udělat.
Je důležité si uvědomit, že správné umístění prvků může být náročné, zvláště pokud již máte jiná pravidla CSS, která ovlivňují umístění prvků. Doporučuje se pečlivě kontrolovat a testovat vaše styly, abyste se ujistili, že je tlačítko zarovnáno uprostřed podle očekávání.
Vytvoření tlačítka pomocí obrázku na pozadí
K vytvoření tlačítka pomocí obrázku na pozadí budete potřebovat obrázek, který bude použit jako pozadí tlačítka. Tento obrázek může mít libovolnou velikost a může obsahovat jakýkoli design, který chcete použít na tlačítko.
Chcete-li začít, vytvořte tabulku s jednou buňkou a jedním řádkem. Poté použijte příslušnou třídu CSS pro tabulku a upravte pozadí tlačítka na váš obrázek pomocí vlastnosti background-image. Můžete také zadat další vlastnosti pro přizpůsobení vzhledu tlačítka, jako je velikost, odsazení, Barva písma atd.
Ve výše uvedeném příkladu bude mít tlačítko obrázek na pozadí, který jste uvedli ve třídě CSS .button. Pokud chcete změnit design tlačítka, jednoduše nahraďte obrázek ve třídě CSS tím, co chcete.
Použití flexboxu k vycentrování tlačítka
Chcete-li začít, vytvořte kontejner, ve kterém bude vaše tlačítko umístěno. K tomu můžete použít značku s danou třídou.
Poté aplikujte styly na váš kontejner pomocí CSS. Chcete-li povolit režim flexboxu , nastavte u kontejneru vlastnost display s hodnotou flex. Přidejte vlastnost justify-content s hodnotou center pro horizontální vycentrování obsahu. Nastavte také vlastnost align-items s hodnotou center pro vertikální vycentrování obsahu.
Dále přidejte vnitřní prvek do nádoby, která bude vaším tlačítkem. Může to být značka nebo podle vašich potřeb.
Pro tlačítko nastavte vlastnost margin s hodnotou auto pro automatické zarovnání tlačítka uvnitř kontejneru.
Zde je příklad kódu:
A odpovídající styly:
.button-container buttonNyní bude vaše tlačítko vycentrováno vodorovně i svisle uvnitř kontejneru.