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

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

wise.com düğmeleri hangi renk?

wise.com sitesinin birincil düğmesi #163300 zemin üzerinde #9fe870 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ı wise.com düğmelerini kopyalayabilir mi?

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

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

primary düğmesi

Hover: background #163300 → #0d1f00, text #9fe870 → #bbef9a, border #9fe870 → #bbef9a, icon/inner colour → #bbef9a
Focus: outline 2px solid rgb(22, 51, 0), offset 2px
Geçiş: color, background-color, border-color, 0.35s

secondary düğmesi

Send money

Hover: background #163300 → #0d1f00, border #163300 → #0d1f00
Geçiş: color, background-color, 0s, 0.15s

ghost düğmesi

Personal

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

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, wise.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: 32px;
6  padding: 8px 12px;
7  background: #163300;
8  color: #9fe870;
9  border: none;
10  border-radius: 9999px;
11  font-size: 18px;
12  font-weight: 600;
13  font-family: "Inter", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 48px;
22  padding: 12px 16px;
23  background: #9fe870;
24  color: #163300;
25  border: none;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "Inter", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 32px;
38  padding: 8px 12px;
39  background: transparent;
40  color: #163300;
41  border: none;
42  border-radius: 9999px;
43  font-size: 18px;
44  font-weight: 400;
45  font-family: "Inter", 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/wise.com/DESIGN.md

wise.com sitesindeki düğmeler