Cvičení 1
Tlačítko
Co si vyzkoušíte
Postavíte tlačítko bez jediného vlastního pravidla v CSS. Ve výchozím stavu máte stránku s Tailwindem připojeným přes Play CDN a na ní neostylované tlačítko.
Utility se hledají v dokumentaci na tailwindcss.com. Vyhledávací pole tam bere i názvy vlastností z CSS, takže po zadání border-radius najdete, že zakulacené rohy se v Tailwindu dělají pomocí tříd rounded-*.
Zadání
- Dejte tlačítku vnitřní odsazení, zaoblené rohy a tučnější písmo.
- Vyberte si barvy z palety barev.
- Nastavte barvu pozadí a textu tak, aby byl text dobře čitelný.
- Přidejte rámeček v tmavším odstínu stejné barvy, jako je barva tlačítka
- Mezi ikonou a textem udělejte větší odsazení. Pomocí třídy, ne tím, že v HTML přidáte mezeru.
- Vyberte tlačítko ve vývojářských nástrojích prohlížeče. Na panelu se styly se podívejte, jaké v sobě jednotlivé třídy na tlačítku mají hodnoty.
Bonus
- Přidejte druhou variantu tlačítka, která má jen rámeček a průhledné pozadí.
- Přidejte hover efekt. Průhlednému tlačítku se při najetí myši změní barva pozadí.