Ten przykład wykorzystuje tylko kontrolki generatora. Powyższe obrazy pokazują faktycznie pobrane arkusze stylów zastosowane do zwykłych przycisków HTML, a nie zrzuty ekranu edytora.
Otwórz generator przycisków CSS
Zacznij od Signature
Otwórz generator przycisków CSS. W ustawieniach wstępnych (Presets) wybierz Signature z kolekcji Everyday. Ustaw tekst przycisku na „Get started”. W obszarze kodu ustaw nazwę klasy na cta-button.
Ustawienie wstępne zastępuje domyślne style i style najechania, podczas gdy etykieta i nazwa klasy pozostają bez zmian. Wybierz punkt wyjścia przed wprowadzeniem szczegółowych poprawek.
Nazwa klasy łączy reguły CSS z Twoim przyciskiem HTML. Generator usuwa nieobsługiwane znaki; użyj krótkiej, charakterystycznej nazwy, aby uniknąć stylizowania niepowiązanych elementów.
Stwórz zaokrąglony przycisk z gradientem
Pozostaw stan edycji (Editing state) na Default. W sekcji Text wybierz System sans, rozmiar czcionki 18 px i wagę Bold. Zachowaj biały kolor tekstu, normalny styl, wyśrodkowane wyrównanie i wysokość linii 1.4.
W sekcji Fill wybierz Linear gradient. Użyj dwóch kolorów i kąta poniżej. Ustaw dopełnienie poziome (Horizontal padding) na 32 px, a pionowe (Vertical padding) na 16 px. W sekcji Shape pozostaw włączoną opcję Link all corners i ustaw promień rogu (Corner radius) na 100 px. Szerokość obramowania pozostaje 0 px.
W sekcji Shadow pozostaw włączoną opcję Box shadow. Użyj przesunięcia poziomego 0 px, pionowego 8 px, rozmycia 24 px, rozproszenia −4 px, koloru #460BD8 i krycia 32%. Pozostaw Inset shadow i Text shadow wyłączone.
Dopełnienie zmienia przestrzeń wokół tekstu. Promień rogu zmienia kontur. Duży promień tworzy ten zaokrąglony kształt bez poszerzania etykiety.
Nadaj stanowi najechania własny wygląd
Przełącz stan edycji (Editing state) na Hover. W sekcji Fill zmień kolor tła na #33099E, a drugi kolor na #6D20BF. Zachowaj kąt gradientu na 135°. W sekcji Shadow zmień przesunięcie pionowe na 10 px, a rozmycie na 28 px. Pozostaw pozostałe ustawienia bez zmian.
Użyj przycisków Default, Hover i Active na kanwie, aby sprawdzić każdy stan. Możesz również najechać kursorem lub nacisnąć przycisk podglądu. Zmień tło kanwy między jasnym a ciemnym, aby sprawdzić krawędzie i cień.
Stan edycji wybiera style, które zmieniasz. Stan kanwy zmienia tylko to, co podglądasz. Wróć do edycji Default przed dostosowaniem wyglądu spoczynkowego.
Właściwości najechania, które nadal pasują do domyślnych, podążają za późniejszymi edycjami domyślnymi. Gdy dostosujesz właściwość najechania, pozostaje ona niezależna. Sprawdź ponownie oba stany po zmianie stylu bazowego.
Wyeksportuj i przetestuj na swojej stronie
Wybierz kartę CSS i użyj Copy CSS lub wybierz Download, aby zapisać cta-button.css. Wybierz kartę HTML i skopiuj pasujący znacznik przycisku. HTML zawiera tę samą nazwę klasy i przycisk z typem="button".
Dodaj CSS do swojego arkusza stylów lub podlinkuj pobrany plik ze swojej strony. Umieść HTML tam, gdzie powinien znajdować się przycisk. Oba eksporty współpracują ze sobą: sam przycisk HTML nie zawiera stylizacji.
Otwórz stronę i przetestuj stany domyślny, najechania, fokusu klawiatury i naciśnięcia. Eksport zawiera obrys focus-visible, niewielki ruch przy naciśnięciu i regułę ograniczonego ruchu. Twoje otaczające style i zainstalowane czcionki nadal mogą wpływać na wynik.
Wygenerowany przycisk to wystylizowany element sterujący. Połącz jego zachowanie po kliknięciu w swoim projekcie; użyj poprawnego typu przycisku podczas dodawania go do formularza.
cta-button.css
Pobrana nazwa pliku odpowiada nazwie klasy.
Często zadawane pytania
Czy potrzebuję frameworka CSS?
Nie. Wynikiem jest standardowy CSS oraz zwykły przycisk HTML. Wklej CSS do własnego arkusza stylów i użyj pasującej klasy na przycisku.
Czy Download zapisuje również HTML?
Download zapisuje plik .css nazwany zgodnie z klasą. Skopiuj znacznik przycisku oddzielnie z karty HTML.
Czy mogę nadać każdemu rogowi inny promień?
Tak. W sekcji Shape wyłącz Link all corners, a następnie ustaw Top left, Top right, Bottom right i Bottom left niezależnie. Ten przykład utrzymuje je połączone dla uzyskania kształtu pigułki.
Czy mój projekt będzie tu przy następnej wizycie?
Studio próbuje zapisać bieżący szkic w pamięci lokalnej przeglądarki. Nie jest to konto ani kopia zapasowa między urządzeniami. Ustawienia przeglądarki, wyczyszczenie danych witryny lub resetowanie mogą usunąć lub zastąpić ten szkic, dlatego eksportuj pracę, którą chcesz zachować.
Czy mój przycisk jest przesyłany na serwer?
Podgląd stylizacji oraz generowanie CSS/HTML odbywają się w Twojej przeglądarce. Edytor nie przesyła tekstu przycisku ani szkicu stylizacji w celu utworzenia eksportu.
Nadaj swojemu kolejnemu przyciskowi własny styl.
Wybierz punkt wyjścia, dostosuj szczegóły i przenieś kod do swojego projektu.