Bagaimana cara membuat tombol seperti linear.app?

Pakai CSS di halaman ini: tombol utamanya berwarna #e5e5e6 dengan teks #08090a, sudut 9999px, tinggi 32px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai linear.app.

Apa warna tombol linear.app?

Tombol utama di linear.app berwarna #e5e5e6 dengan teks #08090a. 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 linear.app?

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

Tombol primary

Hover: tidak ada perubahan terlihat
Focus: outline 1px solid rgb(94, 105, 209), offset 2px
Transisi: border, background-color, color, box-shadow, opacity, filter, transform, 0.16s

Tombol secondary

Performance

Hover: tidak ada perubahan terlihat
Transisi: all, 0s

Tombol ghost

Product

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 0px 12px;
7  background: #e5e5e6;
8  color: #08090a;
9  border: 1px solid #e5e5e6;
10  border-radius: 9999px;
11  font-size: 13px;
12  font-weight: 510;
13  font-family: "Inter Variable", sans-serif;
14  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;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 24px;
23  padding: 0px 11px;
24  background: transparent;
25  color: #d0d6e0;
26  border: 1px solid #2e2e32;
27  border-radius: 16px;
28  font-size: 12px;
29  font-weight: 400;
30  font-family: "Inter Variable", sans-serif;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 32px;
39  padding: 0px 12px;
40  background: transparent;
41  color: #8a8f98;
42  border: none;
43  border-radius: 9999px;
44  font-size: 13px;
45  font-weight: 400;
46  font-family: "Inter Variable", sans-serif;
47  cursor: pointer;
48}

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/linear.app/DESIGN.md

Tombol di linear.app