Stylepack

Düğmeler

causal.so sitesindeki düğmeler

causal.so sitesinin birincil düğmesi #1a1a1a zemin, #f9f9f9 metin, 100px köşe ve 36px 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.

causal.so sitesinden 4 gün önce ölçüldü.

Tam tasarım paketini açPaketi indir

primary düğmesi

Start for free
Hover
görünür değişiklik yok
Focus
outline 2px solid rgb(26, 26, 26), offset 2px
Geçiş
color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, 0.3s

ghost düğmesi

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0px 14px;
  background: #1a1a1a;
  color: #f9f9f9;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Manrope Variable", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0px 0px;
  background: transparent;
  color: #878787;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Manrope Variable", sans-serif;
  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/causal.so/DESIGN.md

Sorular

causal.so gibi düğmeleri nasıl yaparım?

Bu sayfadaki CSS’i kullanın: birincil düğme #1a1a1a zemin, #f9f9f9 metin, 100px köşe, 36px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu causal.so sitesinin kullandığı fonta ayarlayın.

causal.so düğmeleri hangi renk?

causal.so sitesinin birincil düğmesi #1a1a1a zemin üzerinde #f9f9f9 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ı causal.so düğmelerini kopyalayabilir mi?

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