Bagaimana cara membuat tombol seperti openai.com?

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

Apa warna tombol openai.com?

Tombol utama di openai.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 openai.com?

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

Tombol primary

Try ChatGPT(opens in a n

Hover: tidak ada perubahan terlihat
Focus: outline 1px none rgba(0, 0, 0, 0.486), offset 2px
Transisi: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.2s

Tombol secondary

Learn about ChatGPT Busi

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, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.25s

Tombol ghost

Products

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 36px;
6  padding: 0px 20px;
7  background: #000000;
8  color: #ffffff;
9  border: none;
10  border-radius: 40px;
11  font-size: 14px;
12  font-weight: 500;
13  font-family: "OpenAI 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: 40px;
22  padding: 0px 12px;
23  background: transparent;
24  color: #000000;
25  border: 1px solid #0000001f;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 500;
29  font-family: "OpenAI Sans", sans-serif;
30  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 64px;
39  padding: 0px 16px;
40  background: transparent;
41  color: #000000;
42  border: none;
43  border-radius: 0px;
44  font-size: 17px;
45  font-weight: 400;
46  font-family: "OpenAI Sans", 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/openai.com/DESIGN.md

Tombol di openai.com