Bagaimana cara membuat tombol seperti sweetgreen.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #00473c dengan teks #e6ff55, sudut 9999px, tinggi 30px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai sweetgreen.com.

Apa warna tombol sweetgreen.com?

Tombol utama di sweetgreen.com berwarna #00473c dengan teks #e6ff55. 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 sweetgreen.com?

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

Tombol primary

Order

Hover: background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e
Focus: border → #0e150e50
Transisi: all, 0.3s

Tombol secondary

Order now

Hover: background #e6ff55 → #00473c, text #00473c → #f4f3e7, border transparent → #00473c, icon/inner colour → #f4f3e7
Transisi: all, 0.3s

Tombol ghost

Salads

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 30px;
6  padding: 7px 16px;
7  background: #00473c;
8  color: #e6ff55;
9  border: 1px solid transparent;
10  border-radius: 9999px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Grenette", sans-serif;
14  text-transform: uppercase;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 46px;
23  padding: 15px 60px;
24  background: #e6ff55;
25  color: #00473c;
26  border: 1px solid transparent;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "Grenette", sans-serif;
31  text-transform: uppercase;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 48px;
40  padding: 0px 0px;
41  background: transparent;
42  color: #0e150e;
43  border: none;
44  border-radius: 4px;
45  font-size: 48px;
46  font-weight: 200;
47  font-family: "Grenette", sans-serif;
48  text-transform: capitalize;
49  cursor: pointer;
50}

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/sweetgreen.com/DESIGN.md

Tombol di sweetgreen.com