Przyciski CSS: samouczki i przykłady
Tworzenie przycisków za pomocą CSS jest jedną z najbardziej eksperymentowanych technik projektowania stron internetowych. Przykłady i tutoriale obfitują.
Największy ostatnio trend w projektowaniu guzików CSS wydaje się eliminować obrazy, zwłaszcza obrazy tła, z przycisków. Ale jest wiele innych rzeczy, które projektanci robią za pomocą przycisków, niektóre z nich zawierają obrazy.
Poniżej zebraliśmy ponad dwadzieścia samouczków, przykładów i narzędzi do tworzenia przycisków CSS, z których większość używa CSS3.
W zestawie znajdują się przyciski pasujące praktycznie do każdego stylu. Staraliśmy się skupić na nowszych technikach, pomijając długotrwałe techniki (np metoda drzwi przesuwnych do tworzenia zaokrąglonych narożników), z którymi większość projektantów już się zna.
Jeśli masz inne samouczki lub przykłady, którymi chciałbyś się podzielić, zrób to w komentarzach!
Samouczki i artykuły
Ponowne odkrywanie elementu przycisku
Naprawdę pomocny artykuł omawiający button element w CSS, który często jest pomijany przez projektantów. Jest nieco starszy, ale wciąż ma mnóstwo przydatnych informacji na temat tworzenia stylowych przycisków za pomocą CSS.
Piękne przyciski CSS z zestawem ikon
Oto kolejny artykuł, który mówi o tym, jak tworzyć przyciski z ikonami, ale używając span klasy, a nie button element.
Zbuduj praktyczne przyciski CSS3
Ten samouczek wideo z Nettuts + pokazuje, jak tworzyć praktyczne przyciski CSS3, które zawierają nawet to, co wydaje się być obrazem z ikony ptaka na Twitterze, ale w rzeczywistości jest ono w całości tworzone za pomocą CSS3.
Piękne przyciski podobne do Photoshopa z CSS3
Podczas gdy przyciski nie są szczególnie przyszłościowe pod względem wyglądu, niesamowite jest to, że zostały one utworzone całkowicie za pomocą CSS3, bez użycia obrazów, i opierały się tylko na przyciskach utworzonych w Photoshopie.
Lepsze interakcje między przyciskami i nawigacją
To świetny, prosty samouczek od Darrena Hoyta na temat tworzenia lepszych zachowań przycisków, które zachęcają użytkowników do interakcji z Twoją witryną.
Super niesamowite przyciski z CSS3 i RGBA
Ten samouczek z Zurb obejmuje używanie CSS3 i alpha-blending przy użyciu RGBA do tworzenia skalowalnych przycisków z tylko jednym obrazem PNG.
Budowanie pięknych przycisków z gradientami CSS
Samouczek do budowania przycisku za pomocą gradientów CSS, podobnych do tych używanych przez Mozillę dla Firefox Personas.
Jak zaprojektować seksowny przycisk za pomocą CSS
W tym samouczku pokazano, jak utworzyć duży, żywy przycisk bez użycia obrazów.
Realistyczne guziki CSS3
Są to proste przyciski, utworzone w całości za pomocą CSS3, w tym niektóre pseudoelementy.
Ładne przyciski CSS3
W tym samouczku pokazano, jak utworzyć prosty, lekko błyszczący przycisk, który jest skalowalny i można go utworzyć w dowolnym kolorze bez obrazów.
Przyciski CSS3 bez żadnych obrazów
Prosty samouczek do tworzenia dynamicznych przycisków używających tylko CSS3 i bez obrazów. Dla każdego przycisku istnieją cztery stany, w tym stany wyłączone, stłumione i kliknięte.
5 różnych samouczków w dynamicznych przyciskach zaokrąglonych narożników CSS
Jest to zbiór pięciu różnych samouczków do tworzenia przycisków CSS z zaokrąglonymi narożnikami. Dwa obejmują wykorzystanie obrazów, ale pozostałe trzy nie.
Utwórz przycisk CSS3, który będzie ładnie się rozkładał
Dopóki wszystkie przeglądarki poprawnie obsługują CSS3, pojawią się problemy podczas używania go do tworzenia takich elementów, jak przyciski. Ten samouczek pokazuje, jak tworzyć wspaniałe przyciski CSS3, które również wyglądają dobrze w starszych przeglądarkach, takich jak IE6 i 7.
Pasek nawigacyjny Apple używa tylko CSS
Ten samouczek pokazuje, jak odtworzyć menu nawigacyjne w stylu przycisku na stronie Apple. Działa najlepiej w Safari 3+, ale nadal wygląda dobrze w innych przeglądarkach.
Utwórz przycisk wezwania do działania CSS3
W tym samouczku pokazano, jak utworzyć przycisk wezwania do działania całkowicie za pomocą CSS, który zawiera różne stany domyślne i hover.
Sexy przyciski z CSS3
Ten prosty samouczek pokazuje, jak tworzyć ładnie stylizowane przyciski z unikalnymi stanami aktywnymi i aktywnymi. Przyciski można skalować, a ich kolor można łatwo zmienić.
Błyszczące przyciski bez obrazów używających tylko CSS3
Patrząc na te guziki, trudno uwierzyć, że powstały bez obrazów, chyba że przyjrzysz się uważnie. Kod jest skomplikowany, ale efekt końcowy wygląda świetnie, wraz z efektem najechania.
Przyciski CSS3 z ikonami
W tym samouczku pokazano, jak tworzyć przyciski CSS3 z gradientami, które zawierają również obrazy ikon i są kompatybilne z różnymi przeglądarkami.
Rzuć własne przyciski Google
W tym samouczku pokazano, jak tworzyć skalowalne przyciski w stylu Google z kolorowymi ramkami. Końcowe wyniki są minimalistyczne i czyste.
Przykłady i narzędzia
10 niesamowitych przycisków CSS3 do wykorzystania w Twojej witrynie
Oto zbiór dziesięciu przycisków, których możesz użyć w swojej witrynie. Wszystkie są dość proste, ale są tworzone przy użyciu samego CSS3 bez obrazów.
Przyciski gradientowe CSS3
To jest ogromna kolekcja przycisków CSS3 z Web Designer Wall. Zawarte są różne kształty, rozmiary i kolory, wszystkie z gradientami. Jedną z najlepszych części na ich temat jest jednak to, jak z gracją te przyciski ulegają degradacji w przeglądarkach, które nie mają pełnej obsługi CSS3.
Kreator przycisków
CSS-Tricks oferuje ten darmowy kreator przycisków CSS3. Po prostu zdefiniuj kolory tła dla każdego stanu przycisku, rozmiaru i atrybutów tekstu, a utworzy kod CSS dla Ciebie.
Przyciski radioaktywne
Przyciski te używają animacji CSS w Safari, aby stworzyć pulsujący, świecący efekt. W innych przeglądarkach obsługujących CSS3 nadal są one doskonale funkcjonalne i wyglądają dobrze.
Znasz inne techniki tworzenia niesamowitych przycisków CSS, które nie zostały tutaj wymienione? A może masz ulubiony przykład? Podziel się nimi w komentarzach!