Bagaimana cara membuat tombol seperti resend.com?

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

Apa warna tombol resend.com?

Tombol utama di resend.com berwarna #00a3ff 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 resend.com?

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

Tombol primary

Get Started

Hover: tidak ada perubahan terlihat

Tombol secondary

Hover: tidak ada perubahan terlihat
Transisi: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.2s

Tombol ghost

Features

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 41px;
6  padding: 12px 20px;
7  background: #00a3ff;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "inter", 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: 0px 16px;
23  background: transparent;
24  color: #a1a4a5;
25  border: 1px solid transparent;
26  border-radius: 16px;
27  font-size: 14px;
28  font-weight: 600;
29  font-family: "inter", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 58px;
38  padding: 4px 12px;
39  background: transparent;
40  color: #a1a4a5;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 500;
45  font-family: "inter", 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/resend.com/DESIGN.md

Tombol di resend.com