Bagaimana cara membuat tombol seperti relume.ai?

Pakai CSS di halaman ini: tombol utamanya berwarna #ff00f4 dengan teks #ffffff, sudut 6px, tinggi 32px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai relume.ai.

Apa warna tombol relume.ai?

Tombol utama di relume.ai berwarna #ff00f4 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 relume.ai?

Bisa. Paket desain relume.ai 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 relume.ai: buat tombol seperti miliknya

Tombol primary

Generate Website

Hover: moves down 1px
Focus: outline 1px auto rgb(16, 16, 16)
Transisi: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Tombol secondary

Pelajari lebih lanjut

Hover: tidak ada perubahan terlihat
Transisi: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Tombol ghost

Aura Trails

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 6px 12px;
7  background: #ff00f4;
8  color: #ffffff;
9  border: none;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Geist Variable", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 88px;
22  padding: 0px 0px;
23  background: #ffffffeb;
24  color: #101010;
25  border: none;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "Geist Variable", sans-serif;
30  box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px 0px;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 25px;
39  padding: 0px 8px;
40  background: transparent;
41  color: #161616;
42  border: none;
43  border-radius: 6px;
44  font-size: 14px;
45  font-weight: 400;
46  font-family: "Geist Variable", sans-serif;
47  cursor: pointer;
48}

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/relume.ai/DESIGN.md

Tombol di relume.ai