Stylepack

Düğmeler

figma.com sitesindeki düğmeler

figma.com sitesinin birincil düğmesi #000000 zemin, #ffffff metin, 8px köşe ve 46px yükseklikte. Aşağıda: sitenin kullandığı her düğme varyantı, hover ve focus durumları ve sizinkini aynı görünüme kavuşturacak CSS.

figma.com sitesinden 4 gün önce ölçüldü.

Tam tasarım paketini açPaketi indir

primary düğmesi

Get started for free
Hover
background #000000 → oklch(0 0 none / 0.85)
Focus
outline 2px dashed rgb(0, 0, 0), offset 4px
Geçiş
background, box-shadow, 0.18s, 0.18s

ghost düğmesi

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

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, figma.com sitesinin düğmelerinde kullandığı font.

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 330;
  font-family: "figmaSans", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  font-family: "figmaSans", sans-serif;
  box-shadow: oklch(0 0 none / 0.16) 0px 0px 0px 1px inset;
  cursor: pointer;
}

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

Sorular

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

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

figma.com düğmeleri hangi renk?

figma.com sitesinin birincil düğmesi #000000 zemin üzerinde #ffffff metin. Site toplam 2 düğme varyantı kullanıyor; her biri zemini, kenarlığı, köşe yarıçapı ve boyutuyla bu sayfada listelenmiş.

Bir yapay zeka kodlama ajanı figma.com düğmelerini kopyalayabilir mi?

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