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

linear.app

Zmierzono 4 dni temu.

Sign upPerformanceProduct
buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 12px;
  background: #e5e5e6;
  color: #08090a;
  border: 1px solid #e5e5e6;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 510;
  font-family: "Inter Variable", sans-serif;
  box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0px 11px;
  background: transparent;
  color: #d0d6e0;
  border: 1px solid #2e2e32;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 400;
  font-family: "Inter Variable", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 12px;
  background: transparent;
  color: #8a8f98;
  border: none;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 400;
  font-family: "Inter Variable", 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.