Bagaimana cara membuat tombol seperti airbnb.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #ffffff4d dengan teks #000000, sudut 100px, tinggi 35px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai airbnb.com.

Apa warna tombol airbnb.com?

Tombol utama di airbnb.com berwarna #ffffff4d dengan teks #000000. Situs ini memakai 2 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol airbnb.com?

Bisa. Paket desain airbnb.com dari Stylepack memuat setiap varian tombol beserta state-nya, font, warna, dan screenshot, sehingga Claude Code, Cursor, atau Copilot bisa membuat tombol yang serupa.

CSS tombol airbnb.com: buat tombol seperti miliknya

Tombol secondary

OnOff

Hover: tidak ada perubahan terlihat
Transisi: ,

Tombol ghost

Become a host

Hover: tidak ada perubahan terlihat

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai airbnb.com pada tombolnya.

buttons.css

1.btn-secondary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 35px;
6  padding: 0px 16px;
7  background: #ffffff4d;
8  color: #000000;
9  border: none;
10  border-radius: 100px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Airbnb Cereal VF", sans-serif;
14  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;
15  cursor: pointer;
16}
17
18.btn-ghost {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 40px;
23  padding: 11px 12px;
24  background: transparent;
25  color: #222222;
26  border: none;
27  border-radius: 20px;
28  font-size: 14px;
29  font-weight: 500;
30  font-family: "Airbnb Cereal VF", sans-serif;
31  cursor: pointer;
32}

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

curl -s https://stylepack.ai/packs/airbnb.com/DESIGN.md

Tombol di airbnb.com