Stylepack

Düğmeler

voiceflow.com sitesindeki düğmeler

voiceflow.com sitesinin birincil düğmesi #397dff zemin, #ffffff metin, 8px köşe ve 37px 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.

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

Tam tasarım paketini açPaketi indir

primary düğmesi

Get started
Hover
background #397dff → #2f68db, shadow deepens
Focus
outline 1px none rgb(255, 255, 255), offset 1px
Geçiş
all, 0.2s

secondary düğmesi

Daha fazla bilgi
Hover
background #397dff → #2f68db, shadow deepens
Geçiş
background-color, color, opacity, box-shadow, border-color, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

ghost düğmesi

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 10px 14px;
  background: #397dff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: "UCity Pro", sans-serif;
  box-shadow: rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 0px;
  background: #ffffff;
  color: #1a1e23;
  border: none;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "UCity Pro", sans-serif;
  box-shadow: rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 4px 12px;
  background: transparent;
  color: #515a63;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 400;
  font-family: "UCity Pro", 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/voiceflow.com/DESIGN.md

Sorular

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

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

voiceflow.com düğmeleri hangi renk?

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

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