Zaprojektuj przycisk wizualnie i uzyskaj HTML oraz CSS, aby użyć go na swojej stronie. Zacznij od gotowego stylu, dostosuj typografię, kolory, kształt i cienie, a następnie sprawdź stany interakcji przed eksportem.
Wybierz punkt wyjściaDostosuj go do swoich potrzeb
Przeglądaj presety 44 z kolekcji Everyday, Classic, Shaped, Expressive, Gradients oraz Elite. Każdy preset to punkt wyjścia, który możesz edytować.
Jak presety wpływają na Twój projekt
Najpierw wybierz, potem dopracuj
Użyj kolekcji stylów, aby zawęzić galerię. Zastosowanie presetu zastępuje zarówno domyślny styl, jak i styl po najechaniu kursorem, zachowując jednocześnie tekst przycisku i nazwę klasy.
Wypróbuj proste wypełnienie, zaokrąglone rogi, wyraźny obrys lub bardziej dekoracyjne wykończenie. Gdy znajdziesz odpowiedni kierunek, użyj pozostałych kart, aby dopasować szczegóły do swojej strony.
Zadbaj o odpowiednią etykietę
Ustaw tekst przycisku, rodzinę czcionek, rozmiar, grubość, odstępy, wysokość linii, wyrównanie i kolor tekstu. Obserwuj, jak etykieta aktualizuje się podczas pracy.
Dopracuj tekst i odstępy
Typografia dopasowana do działania
Tekst zawiera kontrolki czcionek oraz drugie pole tekstowe przycisku. Rozmiar czcionki wynosi od 10 do 80 px; wymienione rodziny czcionek korzystają z krojów dostępnych na urządzeniu użytkownika.
Użyj krótkiej etykiety opisującej działanie. W sekcji Wypełnienie, dopełnienie poziome i pionowe dodaje przestrzeń wokół tekstu bez zmiany rozmiaru czcionki. Sprawdź dłuższe etykiety na stronie, gdzie przycisk będzie używany.
Wybierz wypełnienie jednolite lub gradientowe
Użyj jednego koloru tła lub połącz dwa kolory za pomocą gradientu liniowego. Próbniki kolorów i pola szesnastkowe pozwalają pracować wizualnie lub precyzyjnie.
Ustaw kolory i kierunek gradientu
Dwa kolory, jeden wyraźny kierunek
W sekcji Wypełnienie zmień styl wypełnienia na Gradient liniowy, aby odsłonić Drugi kolor i Kąt gradientu. Kąt wynosi od 0 do 360 stopni.
Pola szesnastkowe akceptują pełny sześciocyfrowy kod koloru lub trzycyfrowy skrót. Przetestuj białą lub kolorową etykietę na obu końcach gradientu; studio nie certyfikuje automatycznie kontrastu tekstu.
Kontroluj obrys i głębię
Dostosuj połączone lub niezależne rogi, szerokość i styl obramowania, cienie pudełka oraz cienie tekstu. Nadaj przyciskowi kształt, który pasuje do kontekstu.
Eksploruj rogi, obramowania i cienie
Od ostrego prostokąta po miękką pastylkę
W sekcji Kształt pozostaw włączoną opcję Połącz wszystkie rogi, aby uzyskać wspólny promień, lub wyłącz ją, aby ustawić każdy róg osobno. Style obramowania obejmują: ciągły, przerywany, kropkowany, podwójny, wklęsły, wypukły, grzbiet, rowek oraz brak.
W sekcji Cień ustaw przesunięcia poziome i pionowe, rozmycie, kolor oraz przezroczystość. Cień pudełka posiada również rozproszenie i przełącznik wklęsłości. Cień tekstu jest oddzielny, dzięki czemu możesz dodać głębię etykiecie bez zmiany obrysu przycisku.
Zaprojektuj również interakcję
Edytuj style Domyślny i Po najechaniu osobno. Podglądaj wygląd w stanach Domyślnym, Po najechaniu i Aktywnym, a następnie porównaj przycisk na jasnym i ciemnym tle.
Zrozum stany edycji i podglądu
Dwa edytowalne style, trzy stany podglądu
Stan edycji wybiera, który styl zmieniają Twoje kontrolki. Przyciski stanu płótna służą tylko do podglądu. Najechanie lub kliknięcie podglądu również pokazuje jego interakcję.
Wartości dla stanu po najechaniu, które nadal pasują do domyślnych, podążają za zmianami bazowymi, dopóki nie zostaną dostosowane. Eksportowany CSS zawiera regułę najechania, gdy jest potrzebna, obrys focus-visible, ruch aktywny oraz regułę ograniczonego ruchu.
Przenieś CSS do swojego projektu
Skopiuj wygenerowany CSS i pasujący przycisk HTML lub pobierz arkusz stylów. Nazwa klasy utrzymuje oba elementy połączone.
Kopiuj, pobieraj i zachowuj swoją pracę
Czysty kod, którego możesz użyć bezpośrednio
Wybierz charakterystyczną nazwę klasy, skopiuj CSS z odpowiedniej karty, a następnie skopiuj przycisk z HTML. Pobieranie zapisuje plik .css nazwany zgodnie z klasą; nie pobiera kompletnej strony internetowej.
Podgląd i generowanie kodu działają w Twojej przeglądarce. Studio stara się zapamiętać jeden szkic w pamięci lokalnej przeglądarki; wyeksportuj wszystko, co chcesz zachować. Reset przywraca studio do stylu początkowego.
Tekst i style w środku. HTML i CSS na zewnątrz.
Nie jest wymagane przesyłanie plików. JavaScript zasila edytor na żywo w Twojej przeglądarce. Skopiuj HTML i CSS osobno lub pobierz arkusz stylów CSS. Wygenerowany stos czcionek używa krojów dostępnych na urządzeniu użytkownika.
