Araçlar
Herhangi bir web sitesinin düğme CSS kodunu alın
Bir web sitesi adresi girin ve düğmelerinin CSS kodunu alın: her varyant arka planı, metin rengi, kenarlığı, köşe yarıçapı ve boyutuyla, hover ve focus durumları dahil.
airbnb.com
4 gün önce ölçüldü.
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 35px;
padding: 0px 16px;
background: #ffffff4d;
color: #000000;
border: none;
border-radius: 100px;
font-size: 14px;
font-weight: 400;
font-family: "Airbnb Cereal VF", sans-serif;
box-shadow: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 11px 12px;
background: transparent;
color: #222222;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
font-family: "Airbnb Cereal VF", sans-serif;
cursor: pointer;
}Nasıl çalışır
Stylepack siteyi gerçek bir tarayıcıda açar, dört genişlikte ve iki temada ekranda ne render edildiğini ölçer (stil dosyasının ne dediğini değil) ve sonucu bir tasarım paketi olarak saklar. Daha önce ölçülmüş bir site anında cevap verir; yeni bir site bir dakikadan kısa sürer. Bu sayfadaki her değer o paketten gelir.
Sorular
Hangi düğmeler ölçülüyor?
Sayfada bulunan birincil, ikincil ve ghost varyantları; her biri normal halinde, hover ve focus durumunda ölçülür. CSS, her varyant için ölçülen değerlerle tek bir sınıf içerir.
Düğmem neden hâlâ farklı görünüyor?
Düğmeler fontlarına bağlıdır: düğme fontunu sitenin kullandığı fonta (sonuçta adı geçer) ayarlayın ve önce o fontu ya da ücretsiz muadilini yükleyin. Tasarım paketi font yığınını ve sistemin geri kalanını taşır.
Bunu bir yapay zeka kodlama ajanı kullanabilir mi?
Evet. CSS kodunu yapıştırın ya da ajana sitenin tasarım paketini verin: her varyantı durumlarıyla, renkleri, tipografiyi ve karşılaştırma için ekran görüntülerini içerir.