sweetgreen.com gibi düğmeleri nasıl yaparım?

Bu sayfadaki CSS’i kullanın: birincil düğme #00473c zemin, #e6ff55 metin, 9999px köşe, 30px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu sweetgreen.com sitesinin kullandığı fonta ayarlayın.

sweetgreen.com düğmeleri hangi renk?

sweetgreen.com sitesinin birincil düğmesi #00473c zemin üzerinde #e6ff55 metin. Site toplam 3 düğme varyantı kullanıyor; her biri zemini, kenarlığı, köşe yarıçapı ve boyutuyla bu sayfada listelenmiş.

Bir yapay zeka kodlama ajanı sweetgreen.com düğmelerini kopyalayabilir mi?

Evet. Stylepack’teki sweetgreen.com tasarım paketi her düğme varyantını durumlarıyla, fontlarıyla, renkleriyle ve ekran görüntüleriyle içerir; böylece Claude Code, Cursor ya da Copilot aynı görünümde düğmeler kurabilir.

sweetgreen.com buton CSS: aynı düğmeleri siz de yapın

primary düğmesi

Order

Hover: background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e
Focus: border → #0e150e50
Geçiş: all, 0.3s

secondary düğmesi

Order now

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

ghost düğmesi

Salads

Hover: görünür değişiklik yok

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, sweetgreen.com sitesinin düğmelerinde kullandığı font.

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}

Yapay zeka ajanları için

Paket düz metindir, anahtar gerekmez: DESIGN.md dosyasını alın ya da tüm paketi MCP sunucusuyla Claude Code, Cursor veya Copilot'a verin.

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

sweetgreen.com sitesindeki düğmeler