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ść.

    Zainteresowany bttn.css?

    Szczegóły
  • Ś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.

    Interesują Cię świeże guziki?

    Szczegóły
  • 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!

    Zainteresowany iRaul Pushy Buttons?

    Szczegóły
  • 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.

    Interesują Cię przyciski Loup-Brun?

    Szczegóły
  • 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.

    Interesuje się prasą.css?

    Szczegóły
  • 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ść.

    Interesują Cię przyciski Unicorn UI?

    Szczegóły
  • 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ć.

    Zainteresowany Viavi CSS3 przycisk Hover efekt?

    Szczegóły

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.

Do ciebie: kiedy korzystasz z bibliotek CSS, wolisz używać ich od razu po wyjęciu z pudełka, czy zawsze lubisz dostosowywać?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…