Bagaimana cara membuat tombol seperti dropbox.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #0061fe dengan teks #f7f5f2, sudut 12px, tinggi 40px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai dropbox.com.

Apa warna tombol dropbox.com?

Tombol utama di dropbox.com berwarna #0061fe dengan teks #f7f5f2. Situs ini memakai 3 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol dropbox.com?

Bisa. Paket desain dropbox.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 dropbox.com: buat tombol seperti miliknya

Tombol primary

Get started

Hover: background #0061fe → #0057e5
Focus: box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Transisi: background-color, border-color, 0.1s, 0.1s

Tombol secondary

Try Dropbox free

Hover: background #0061fe → #0057e5
Transisi: background-color, border-color, 0.1s, 0.1s

Tombol ghost

Products

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 0px 12px;
7  background: #0061fe;
8  color: #f7f5f2;
9  border: 2px solid #0061fe;
10  border-radius: 12px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Atlas Grotesk Web", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 55px;
22  padding: 16px 24px;
23  background: transparent;
24  color: #1e1919;
25  border: 2px solid #1e1919;
26  border-radius: 16px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Atlas Grotesk Web", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 72px;
38  padding: 16px 12px;
39  background: transparent;
40  color: #1e1919;
41  border: none;
42  border-radius: 0px;
43  font-size: 13.3333px;
44  font-weight: 400;
45  font-family: "Atlas Grotesk Web", sans-serif;
46  cursor: pointer;
47}

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/dropbox.com/DESIGN.md

Tombol di dropbox.com