Bagaimana cara membuat tombol seperti stripe.com?

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

Apa warna tombol stripe.com?

Tombol utama di stripe.com berwarna #533afd 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 stripe.com?

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

Tombol primary

Contact sales

Hover: background #533afd → #4032c8
Focus: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px
Transisi: color, background-color, border-color, 0.24s, 0.24s, 0.24s

Tombol secondary

Hover: background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c
Transisi: color, background-color, border-color, 0.24s, 0.24s, 0.24s

Tombol ghost

Products

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 11.5px 20px;
7  background: #533afd;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "sohne-var", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 40px;
22  padding: 10.5px 20px;
23  background: transparent;
24  color: #533afd;
25  border: 1px solid #ffffff;
26  border-radius: 4px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "sohne-var", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 40px;
38  padding: 12px 0px;
39  background: transparent;
40  color: #061b31;
41  border: none;
42  border-radius: 4px;
43  font-size: 14px;
44  font-weight: 400;
45  font-family: "sohne-var", 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/stripe.com/DESIGN.md

Tombol di stripe.com