Alat

Dapatkan CSS tombol dari situs web mana pun

Masukkan alamat situs web dan dapatkan CSS tombolnya: setiap varian beserta latar, warna teks, border, radius, dan ukurannya, plus hover dan focus.

Cobastripe.comlinear.appairbnb.com

airbnb.com

Diukur 4 hari yang lalu.

OnOffBecome a host
buttons.css
.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;
}

Cara kerjanya

Stylepack membuka situs di browser sungguhan, mengukur apa yang tampil (bukan apa yang tertulis di stylesheet) pada empat lebar layar dan di kedua tema, lalu menyimpan hasilnya sebagai paket desain. Situs yang sudah diukur langsung terjawab; situs baru butuh kurang dari semenit. Setiap nilai di halaman ini berasal dari paket itu.

Pertanyaan

Tombol mana saja yang diukur?

Varian primary, secondary, dan ghost yang ditemukan di halaman, masing-masing diukur saat diam, saat hover, dan saat focus. CSS-nya punya satu class per varian dengan nilai hasil pengukuran.

Kenapa tombol saya masih terlihat berbeda?

Tombol bergantung pada fontnya: atur font tombol ke font yang dipakai situs (disebutkan di hasil) dan muat font itu, atau pengganti gratisnya, lebih dulu. Paket desainnya memuat font stack dan sisa sistemnya.

Bisakah AI coding agent memakai ini?

Bisa. Tempel CSS-nya, atau serahkan paket desain situs itu ke agen: di dalamnya ada setiap varian beserta state-nya, warna, tipografi, dan screenshot sebagai pembanding.