Bagaimana cara membuat tombol seperti github.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #08872b dengan teks #ffffff, sudut 6px, tinggi 48px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai github.com.

Apa warna tombol github.com?

Tombol utama di github.com berwarna #08872b 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 github.com?

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

Tombol primary

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Focus: outline 2px solid rgb(48, 148, 255)
Transisi: background-color, border-color, 0.2s, 0.2s

Tombol secondary

Search/

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Transisi: background-color, border-color, 0.2s, 0.2s

Tombol ghost

Masuk

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 48px;
6  padding: 6px 20px;
7  background: #08872b;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Mona Sans", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 32px;
22  padding: 1px 12px;
23  background: transparent;
24  color: #ffffff;
25  border: 1px solid #262c28;
26  border-radius: 6px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Mona Sans", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 5px 5px;
39  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 600;
45  font-family: "Mona Sans", 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/github.com/DESIGN.md

Tombol di github.com