Tlačítka CSS: Návody a příklady
Vytváření tlačítek s CSS je jedním z nejvíce experimentovaných - s technikami web designu. Příklady a výukové programy jsou bohaté.
Největší trend v návrhu knoflíků CSS se zdá být odstranění obrázků, zejména obrázků na pozadí, z tlačítek. Existuje však spousta dalších věcí, které návrháři dělají s tlačítky, někteří zahrnují obrazy.
Níže jsme shromáždili více než dvacet tutoriálů, příkladů a nástrojů pro vytváření tlačítek CSS, z nichž většina používá CSS3.
Zahrnuty jsou tlačítka tak, aby vyhovovaly prakticky všem stylům designu. Snažili jsme se soustředit se na nové techniky zde a vynechat dlouhodobé techniky (jako je metoda posuvných dveří pro vytváření zaoblených rohů), které již většina designérů pozná.
Pokud máte další návody nebo příklady, které chcete sdílet, postupujte prosím v komentářích!
Návody a články
Znovu objevit prvek tlačítka
Velmi užitečný článek, který diskutuje o button element v CSS, který je často přehlížen konstruktéry. Je trochu starší, ale stále má hodně užitečných informací o vytváření stylovějších tlačítek s CSS.
Krásné tlačítka CSS se sadou ikon
Zde je další článek, který mluví o tom, jak vytvořit tlačítka s ikonami, ačkoli pomocí span třídy spíše než button živel.
Vybudujte praktické tlačítka CSS3
Tento video tutoriál od Nettuts + ukazuje, jak vytvořit praktická tlačítka CSS3, která dokonce obsahují ikonu Twitter bird icon, ale ve skutečnosti jsou vytvořena pouze s CSS3.
Krásné tlačítka typu Photoshop s CSS3
Zatímco tlačítka zde nejsou z hlediska vzhledu zvlášť dopředu, je úžasné, že byly vytvořeny zcela pomocí CSS3 bez použití obrázků a byly založeny pouze na tlačítkách vytvořených ve Photoshopu.
Lepší interakce s tlačítky a navigací
Jedná se o skvělý a jednoduchý výukový program od Darren Hoyta o vytváření lepších chování vašich knoflíků, které povzbuzují návštěvníky, aby se s vámi spojili.
Super úžasná tlačítka s CSS3 a RGBA
Tento tutoriál od Zurbu pokrývá použití CSS3 a alfa-blendingu pomocí RGBA k vytvoření škálovatelných tlačítek s jediným obrazem PNG.
Vytvářejte krásná tlačítka s gradienty CSS
Návod pro vytváření tlačítka pomocí gradientů CSS, které jsou podobné těm, které používají Mozilla pro Firefox Personas.
Jak navrhnout sexy tlačítko pomocí CSS
Tento tutoriál ukazuje, jak vytvořit velké, živé tlačítko bez použití obrázků.
Realisticky vypadající tlačítka CSS3
Jedná se o jednoduchá tlačítka vytvořená zcela s CSS3 včetně některých pseudo-prvků.
Docela tlačítka CSS3
Tento tutoriál ukazuje, jak vytvořit jednoduché, lehce lesklé tlačítko, které je škálovatelné a může být vytvořeno v libovolné barvě bez obrázků.
Tlačítka CSS3 bez obrázků
Jednoduchý návod pro vytváření dynamických tlačítek, které používají pouze CSS3 a žádné obrázky. Každá klávesa obsahuje čtyři stavy, včetně stavů se zdravotním postižením, pohybem a kliknutím.
5 různých návodů dynamických kruhových tlačítek kruhových rohů CSS
Jedná se o sbírku pěti různých návodů pro vytváření tlačítek CSS se zaoblenými rohy. Dvě z nich zahrnují použití obrázků, ale ostatní tři ne.
Vytvořte tlačítko CSS3, které se pekně degraduje
Dokud nebudou všechny prohlížeče správně podporovány CSS3, budeme se při vytváření věcí, jako jsou tlačítka, dostávat do problémů. Tento tutoriál ukazuje, jak vytvořit skvělé tlačítka CSS3, které také vypadají dobře ve starších prohlížečích, jako například IE6 a 7.
Apple navigační panel používající pouze CSS
Tento tutoriál ukazuje, jak znovu vytvořit navigační menu ve stylu tlačítka na webových stránkách společnosti Apple. To funguje nejlépe v Safari 3+, ale přesto vypadá dobře v jiných prohlížečích.
Vytvořte tlačítko volání CSS3
Tento tutoriál ukazuje, jak vytvořit tlačítko výzvy k akci úplně pomocí CSS, které obsahuje různé výchozí a vznášející se stavy.
Sexy tlačítka s CSS3
Tento jednoduchý výukový program ukazuje, jak vytvořit pěkně navržené tlačítka s jedinečným pohybem a aktivním stavem. Tlačítka lze měnit a jejich barvy lze snadno měnit.
Lesklé tlačítka bez obrázků používající pouze CSS3
Podíváme-li se na tato tlačítka, je těžké uvěřit, že jsou vyrobeny bez obrázků, pokud se nehledáte velmi pozorně. Kód je komplikovaný, ale konečný výsledek vypadá skvěle, kompletní s efektem vznášení.
Tlačítka CSS3 s ikonami
Tento tutoriál ukazuje, jak vytvořit tlačítka CSS3 s přechody, které obsahují ikony ikon a jsou kompatibilní s více prohlížeči.
Zadejte vlastní Google tlačítka
Tento tutoriál ukazuje, jak vytvořit škálovatelné tlačítka ve stylu Google s barevnými okraji. Konečné výsledky jsou minimalistické a čisté.
Příklady a nástroje
10 úžasných tlačítek CSS3 pro použití na vašem webu
Zde je sbírka deseti tlačítek, která můžete použít na svých webových stránkách. Všechny jsou velmi základní, ale jsou vytvářeny pouze pomocí CSS3 bez obrázků.
CSS3 gradient tlačítka
Jedná se o obrovskou sbírku tlačítek CSS3 od stěny Web Designer. Zahrnuty jsou různé tvary, velikosti a barvy, všechny s přechody. Jedna z nejlepších částí je však, jak elegantně se tato tlačítka degradují v prohlížečích, které nemají plnou podporu CSS3.
Tlačítko
CSS-Triky nabízí toto bezplatné tlačítko CSS3. Stačí definovat barvy pozadí pro každý stav tlačítka, velikost a textové atributy a vytvoří vám kód CSS.
Rádioaktivní tlačítka
Tato tlačítka používají animace CSS v Safari k vytvoření pulzujícího, zářícího efektu. V jiných prohlížečích, které podporují CSS3, jsou stále dokonale funkční a vypadají dobře.
Znáte další techniky pro vytváření úžasných tlačítek CSS, které zde nebyly uvedeny? Nebo máte oblíbený příklad? Prosím, dejte je do komentářů!