Narzędzia
Pobierz CSS przycisków z dowolnej strony
Wpisz adres strony i pobierz CSS jej przycisków: każdy wariant z tłem, kolorem tekstu, obramowaniem, zaokrągleniem i rozmiarem, a także stanami hover i focus.
Wypróbujstripe.comlinear.appairbnb.com
stripe.com
Zmierzono 4 dni temu.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 11.5px 20px;
background: #533afd;
color: #ffffff;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "sohne-var", sans-serif;
cursor: pointer;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 10.5px 20px;
background: transparent;
color: #533afd;
border: 1px solid #ffffff;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "sohne-var", sans-serif;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 12px 0px;
background: transparent;
color: #061b31;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "sohne-var", sans-serif;
cursor: pointer;
}Jak to działa
Stylepack otwiera stronę w prawdziwej przeglądarce, mierzy to, co się renderuje (a nie to, co mówi arkusz stylów) w czterech szerokościach i w obu motywach, a wynik zapisuje jako pakiet designu. Strona już zmierzona odpowiada od razu; nowa zajmuje mniej niż minutę. Każda wartość na tej stronie pochodzi z tego pakietu.
Pytania
Które przyciski są mierzone?
Warianty primary, secondary i ghost znalezione na stronie, każdy zmierzony w spoczynku, w stanie hover i focus. CSS ma jedną klasę na wariant ze zmierzonymi wartościami.
Dlaczego mój przycisk nadal wygląda inaczej?
Przyciski zależą od swojej czcionki: ustaw w przycisku czcionkę, której używa strona (podaną w wyniku), i najpierw załaduj ją albo jej darmowy zamiennik. Pakiet designu zawiera stos czcionek i resztę systemu.
Czy agent AI do kodowania może z tego skorzystać?
Tak. Wklej CSS albo przekaż agentowi pakiet designu strony: zawiera każdy wariant z jego stanami, kolory, typografię i zrzuty ekranu do porównania.