Jak zrobić przyciski jak na openai.com?

Użyj CSS z tej strony: główny przycisk ma tło #000000, tekst #ffffff, zaokrąglenie 40px i wysokość 36px. Dodaj reguły hover i focus wypisane pod każdym wariantem i ustaw na przycisku czcionkę, której używa openai.com.

Jakiego koloru są przyciski openai.com?

Główny przycisk na openai.com ma tło #000000 i tekst #ffffff. Strona używa łącznie 3 wariantów przycisków; każdy jest wypisany na tej stronie ze swoim tłem, obramowaniem, zaokrągleniem i rozmiarem.

Czy agent AI do kodowania może skopiować przyciski openai.com?

Tak. Pakiet designu openai.com ze Stylepack zawiera każdy wariant przycisku z jego stanami, czcionki, kolory i zrzuty ekranu, więc Claude Code, Cursor lub Copilot może zbudować pasujące przyciski.

CSS przycisków openai.com: zrób takie same przyciski

Przycisk primary

Try ChatGPT(opens in a n

Hover: brak widocznej zmiany
Focus: outline 1px none rgba(0, 0, 0, 0.486), offset 2px
Przejście: 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

Przycisk secondary

Learn about ChatGPT Busi

Hover: brak widocznej zmiany
Przejście: 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

Przycisk ghost

Products

Hover: brak widocznej zmiany

CSS

Jedna klasa na wariant, ze zmierzonymi wartościami. Czcionka to ta, którą openai.com ustawia na swoich przyciskach.

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}

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

curl -s https://stylepack.ai/packs/openai.com/DESIGN.md

Przyciski na openai.com