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

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

dropbox.com düğmeleri hangi renk?

dropbox.com sitesinin birincil düğmesi #0061fe zemin üzerinde #f7f5f2 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ı dropbox.com düğmelerini kopyalayabilir mi?

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

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

primary düğmesi

Get started

Hover: background #0061fe → #0057e5
Focus: box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Geçiş: background-color, border-color, 0.1s, 0.1s

secondary düğmesi

Try Dropbox free

Hover: background #0061fe → #0057e5
Geçiş: background-color, border-color, 0.1s, 0.1s

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, dropbox.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: 0px 12px;
7  background: #0061fe;
8  color: #f7f5f2;
9  border: 2px solid #0061fe;
10  border-radius: 12px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Atlas Grotesk Web", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 55px;
22  padding: 16px 24px;
23  background: transparent;
24  color: #1e1919;
25  border: 2px solid #1e1919;
26  border-radius: 16px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Atlas Grotesk Web", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 72px;
38  padding: 16px 12px;
39  background: transparent;
40  color: #1e1919;
41  border: none;
42  border-radius: 0px;
43  font-size: 13.3333px;
44  font-weight: 400;
45  font-family: "Atlas Grotesk Web", 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/dropbox.com/DESIGN.md

dropbox.com sitesindeki düğmeler