Bagaimana cara membuat tombol seperti mercury.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #5266eb dengan teks #ffffff, sudut 32px, tinggi 40px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai mercury.com.

Apa warna tombol mercury.com?

Tombol utama di mercury.com berwarna #5266eb dengan teks #ffffff. 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 mercury.com?

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

Tombol primary

Open account

Hover: tidak ada perubahan terlihat
Focus: outline 2px solid rgb(156, 180, 232), offset 4px
Transisi: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

Tombol secondary

Launch demo

Hover: tidak ada perubahan terlihat
Transisi: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

Tombol ghost

Products

Hover: tidak ada perubahan terlihat

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai mercury.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 20px;
7  background: #5266eb;
8  color: #ffffff;
9  border: none;
10  border-radius: 32px;
11  font-size: 16px;
12  font-weight: 420;
13  font-family: "arcadia", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 40px;
22  padding: 0px 20px;
23  background: #afb2ce33;
24  color: #ededf3;
25  border: 1px solid #afb2ce5c;
26  border-radius: 40px;
27  font-size: 16px;
28  font-weight: 420;
29  font-family: "arcadia", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 40px;
38  padding: 0px 20px;
39  background: transparent;
40  color: #ededf3;
41  border: none;
42  border-radius: 40px;
43  font-size: 16px;
44  font-weight: 420;
45  font-family: "arcadia", 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/mercury.com/DESIGN.md

Tombol di mercury.com