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

Bu sayfadaki CSS’i kullanın: birincil düğme #533afd zemin, #ffffff metin, 4px köşe, 40px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu stripe.com sitesinin kullandığı fonta ayarlayın.

stripe.com düğmeleri hangi renk?

stripe.com sitesinin birincil düğmesi #533afd zemin üzerinde #ffffff 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ı stripe.com düğmelerini kopyalayabilir mi?

Evet. Stylepack’teki stripe.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.

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

primary düğmesi

Contact sales

Hover: background #533afd → #4032c8
Focus: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px
Geçiş: color, background-color, border-color, 0.24s, 0.24s, 0.24s

secondary düğmesi

Hover: background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c
Geçiş: color, background-color, border-color, 0.24s, 0.24s, 0.24s

ghost düğmesi

Products

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

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, stripe.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: 40px;
6  padding: 11.5px 20px;
7  background: #533afd;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "sohne-var", 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: 10.5px 20px;
23  background: transparent;
24  color: #533afd;
25  border: 1px solid #ffffff;
26  border-radius: 4px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "sohne-var", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 40px;
38  padding: 12px 0px;
39  background: transparent;
40  color: #061b31;
41  border: none;
42  border-radius: 4px;
43  font-size: 14px;
44  font-weight: 400;
45  font-family: "sohne-var", sans-serif;
46  cursor: pointer;
47}

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

stripe.com sitesindeki düğmeler