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

linear.app

Diukur 4 hari yang lalu.

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;
}

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.