Wspaniałe biblioteki i kolekcje przycisków CSS dla WordPress

Zastanów się, ile razy klikasz, stukasz lub naciskasz coś w ciągu dnia. W rzeczywistości jest to prawdopodobnie tak zakorzenione w tobie, aby kliknąć przed wypróbowaniem jakiejkolwiek innej akcji, że może być mylące napotkanie czegoś, co wygląda na klikalne, ale w rzeczywistości nic nie robi.

Przyciski są na ogół uniwersalnym znakiem „look over here” I „click me” – zarówno w świecie rzeczywistym, jak i cyfrowym. Pomimo tego, że większość ludzi rozpoznaje przycisk ze względu na jego nieodłączny cel, Twoim zadaniem jako projektanta jest zapewnienie, że przyciski są zaprojektowane w sposób, który zwraca na nie największą uwagę. Nie powinno być absolutnie żadnych wątpliwości w umysłach odwiedzających, że ten przycisk przeniesie ich do następnej strony, następnego kroku w procesie koszyka na zakupy lub do bezpłatnej oferty, którą obiecałeś, jeśli pobrali dziś tę białą księgę.

Jon Penland niedawno dał kilka świetnych wskazówek, jak zaprojektować lepsze przyciski i CTA dla WordPress. Jak widać, często sugeruje użycie CSS w celu poprawy stylizacji wspomnianych przycisków. I to prowadzi mnie do tematu, który chcę dzisiaj omówić.

Kiedy używasz CSS, zazwyczaj celem jest dostosowanie i udoskonalenie projektu, zachowując czysty kod. Dobrym sposobem na zachowanie czystego kodowania i wysokiej jakości wyników jest wykorzystanie wcześniej napisanych frameworków i bibliotek CSS. Jeśli jesteś zainteresowany uzyskaniem takiej pomocy przy projektowaniu przycisków, istnieje kilka absolutnie oszałamiających bibliotek i kolekcji przycisków CSS, z którymi możesz pracować.

Wspaniałe biblioteki i kolekcje przycisków CSS, które musisz sprawdzić

Zestawy narzędzi i kolekcje są zawsze dobrze mieć pod ręką, gdy pracujesz w projektowaniu stron internetowych, ponieważ:

• Mogą pomóc zaoszczędzić czas na projektowaniu od podstaw,
• Mogą nauczyć cię, jak pisać wysokiej jakości kod CSS podczas projektowania unikalnych elementów dla własnej witryny i
• Mogą być również doskonałym źródłem inspiracji.

Niezależnie od „dlaczego” poniższe biblioteki i kolekcje przycisków CSS bez wątpienia pomogą Ci stworzyć ładnie wyglądające przyciski dla Twojej witryny:

• bttn.css

  

  Ta biblioteka przycisków zawiera 13 różnych stylów przycisków, w tym przyciski płaskie, przyciski inspirowane materiałem, przyciski 3D, a także przyciski tekstowe. Ponadto istnieje kilka ustawień, między którymi można przełączać się przed przystąpieniem do korzystania z jednego z tych przycisków. Oprócz możliwości dostosowania koloru i rozmiaru, możesz dopasować przyciski do pełnej szerokości ekranu, a także dodać kontur, aby poprawić dostępność.

• Świeże Guziki

  

  Ten pakiet przycisków CSS jest bardzo prosty w tym, co oferuje, ale prosty może być wszystkim, czego potrzebujesz po tym, jak zobaczysz, jak proste są one w użyciu. Oferowany jest jeden kształt przycisku (podstawowy Zaokrąglony prostokąt) z dwoma stylami przezroczystości. Kolory można łatwo dostosować i wygląda na to, że masz około dziewięciu do zabawy.

• iRaul Pushy Buttons

  

  Pomimo niewielkiego rozmiaru tej biblioteki przycisków CSS, może tu być wystarczająco dużo, aby użyć, jeśli chcesz czystego i klasycznego stylu przycisków dla swojej witryny. Dostępne są trzy podstawowe kolory, a także cztery rozmiary przycisków. W przeciwnym razie wszystko, co musisz zrobić, to zaktualizować tekst przycisku i jesteś gotowy do pracy!

• Przyciski Loup-Brun

  

  Ta kolekcja przycisków CSS jest tak pełna osobowości, że możesz nie być w stanie oderwać wzroku (lub odwiedzających!). Obejmują one tak zróżnicowaną gamę stylów przycisków i animacji, że można realistycznie użyć tego pakietu przycisków do użytku w wielu witrynach klientów i nikt nie byłby mądrzejszy. Ta kolekcja przydałaby się również do testowania CTA A/B, a także do rozwiązywania przyszłych projektów rebrandowych, które nie muszą zbytnio odbiegać od projektu podstawowego.

• Prasa.css

  

  Czy zaprojektowałeś swoją witrynę przy użyciu wytycznych Material Design i potrzebujesz pomocy z przyciskami? Prasa.biblioteka css została stworzona specjalnie dla tych projektantów, którzy chcą, aby każdy element w ich witrynie pozostawał w ramach wstępnie zdefiniowanych stylów ustalonych przez Google, w tym palety kolorów do projektowania materiałów.

• Przyciski Unicorn UI

  

  Ta kolekcja przycisków CSS jest całkiem fajna, ponieważ zawiera tak wiele różnorodności, pomimo zastosowania dość prostej palety kolorów. Podobnie jak w przypadku innych bibliotek przycisków „mega”, ta byłaby świetna dla projektanta, który chce korzystać z tych opcji projektowania przycisków w różnych witrynach. Dzięki mieszance płaskich kontra 3D, zaokrąglonych kontra kwadratowych krawędzi, zarysowanych kontra wypełnionych i różnych opcji animacji do rozważenia, istnieje więcej niż wystarczająca różnorodność.

• Viavi CSS3 efekt unoszenia przycisku

  

  W tej ostatecznej kolekcji przycisków CSS znajdziesz większy nacisk na efekty najazdu zamiast rzeczywistego projektu przycisków. Oprócz przycisków społecznościowych zawartych w tej kolekcji, większość innych przycisków ma bardzo prosty prostokątny wzór. Powodem, dla którego chcielibyście ten pakiet, jest uzyskanie wszystkich fajnych animacji najazdu (jest tak wiele ruchu!). Jeśli Twoja witryna może skorzystać z odrobiny emocji, daj jej spojrzeć.

Wrapping Up

Biblioteki CSS stanowią świetny dodatek do każdego przepływu pracy—i te biblioteki przycisków nie różnią się. Niezależnie od tego, czy potrzebujesz zestawu prostych przycisków, aby użyć ich jako niezawodnej bazy podczas tworzenia własnych projektów, czy chcesz mieć bibliotekę przycisków premium (lub efektów przycisków), aby dać odwiedzającym jeszcze więcej powodów do ich kliknięcia, dziewięć powyższych kolekcji jest dobrym miejscem na początek.

Tagi:

• CSS