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

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

rivian.com düğmeleri hangi renk?

rivian.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ı rivian.com düğmelerini kopyalayabilir mi?

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

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

primary düğmesi

Explore

Hover: background #ffaa00 → #ffbd2e
Focus: outline 2px none rgb(255, 170, 0), offset 2px
Geçiş: color, background-color, border-color, text-decoration-color, fill, stroke, 0.15s

secondary düğmesi

Demo drive

Hover: background oklch(0.96 0 0) → oklch(0.92 0 0)
Geçiş: color, background-color, border-color, text-decoration-color, fill, stroke, 0.15s

ghost düğmesi

Vehicles

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

CSS

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

rivian.com sitesindeki düğmeler