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

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

monzo.com düğmeleri hangi renk?

monzo.com sitesinin birincil düğmesi #091723 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ı monzo.com düğmelerini kopyalayabilir mi?

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

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

primary düğmesi

Hover: background #091723 → #2c3a43, border #091723 → #2c3a43
Focus: outline 1px solid rgb(33, 143, 183), offset 2px
Geçiş: background-color, color, 0.3s, 0.3s

secondary düğmesi

Open a free Monzo accoun

Hover: background #ffffff → #ffffffcc, border #ffffff → #ffffffcc
Geçiş: background-color, 0.2s

ghost düğmesi

Confirm Selected Country

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

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, monzo.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: 51px;
6  padding: 12px 24px;
7  background: #091723;
8  color: #ffffff;
9  border: 1px solid #091723;
10  border-radius: 500px;
11  font-size: 16px;
12  font-weight: 600;
13  font-family: "MonzoSansText", 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 24px;
23  background: #ffffff;
24  color: #091723;
25  border: 1px solid #ffffff;
26  border-radius: 500px;
27  font-size: 16px;
28  font-weight: 600;
29  font-family: "MonzoSansText", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 0px 0px;
39  background: transparent;
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 0px;
44  font-weight: 400;
45  font-family: "MonzoSansText", 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/monzo.com/DESIGN.md

monzo.com sitesindeki düğmeler