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

Bu sayfadaki CSS’i kullanın: birincil düğme #000000 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 papermark.com sitesinin kullandığı fonta ayarlayın.

papermark.com düğmeleri hangi renk?

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

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

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

primary düğmesi

Start now

Hover: background #000000 → #000000e6
Focus: outline 2px solid rgba(0, 0, 0, 0), offset 2px
Geçiş: color, filter, 0.25s, 0.25s

secondary düğmesi

Start for free

Hover: background transparent → #ffffff14
Geçiş: background, color, border-color, 0.2s, 0.2s, 0.2s

ghost düğmesi

Why Papermark?

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

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, papermark.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: 8px 16px;
7  background: #000000;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "__Inter_d8ebd1", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 51px;
22  padding: 14px 22px;
23  background: #ffffff;
24  color: #0b0b0b;
25  border: 1px solid transparent;
26  border-radius: 4px;
27  font-size: 14px;
28  font-weight: 500;
29  font-family: "__Inter_d8ebd1", 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: 4px 10px;
39  background: transparent;
40  color: #ffffff;
41  border: none;
42  border-radius: 6px;
43  font-size: 14px;
44  font-weight: 400;
45  font-family: "__Inter_d8ebd1", 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/papermark.com/DESIGN.md

papermark.com sitesindeki düğmeler