Bagaimana cara membuat tombol seperti papermark.com?

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

Apa warna tombol papermark.com?

Tombol utama di papermark.com berwarna #000000 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 papermark.com?

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

Tombol primary

Start now

Hover: background #000000 → #000000e6
Focus: outline 2px solid rgba(0, 0, 0, 0), offset 2px
Transisi: color, filter, 0.25s, 0.25s

Tombol secondary

Start for free

Hover: background transparent → #ffffff14
Transisi: background, color, border-color, 0.2s, 0.2s, 0.2s

Tombol ghost

Why Papermark?

Hover: tidak ada perubahan terlihat

CSS-nya

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

Tombol di papermark.com