Bagaimana cara membuat tombol seperti rivian.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #000000 dengan teks #ffffff, sudut 40px, tinggi 56px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai rivian.com.

Apa warna tombol rivian.com?

Tombol utama di rivian.com berwarna #000000 dengan teks #ffffff. Situs ini memakai 3 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol rivian.com?

Bisa. Paket desain rivian.com dari Stylepack memuat setiap varian tombol beserta state-nya, font, warna, dan screenshot, sehingga Claude Code, Cursor, atau Copilot bisa membuat tombol yang serupa.

CSS tombol rivian.com: buat tombol seperti miliknya

Tombol primary

Explore

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

Tombol secondary

Demo drive

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

Tombol ghost

Vehicles

Hover: tidak ada perubahan terlihat

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai rivian.com pada tombolnya.

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}

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

curl -s https://stylepack.ai/packs/rivian.com/DESIGN.md

Tombol di rivian.com