Bagaimana cara membuat tombol seperti canva.com?

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

Apa warna tombol canva.com?

Tombol utama di canva.com berwarna #8b3dff 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 canva.com?

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

Tombol primary

Start designing for free

Hover: background #ffffffe5 → #ffffff
Focus: outline 1px auto rgb(238, 238, 238), offset 1px
Transisi: background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

Tombol secondary

Hover: background #ffffffe5 → #ffffff
Transisi: background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

Tombol ghost

Design

Hover: tidak ada perubahan terlihat

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai canva.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: 0px 16px;
7  background: #8b3dff;
8  color: #ffffff;
9  border: none;
10  border-radius: 12px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "Canva Sans", sans-serif;
14  box-shadow: rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(21, 30, 130, 0.03) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 32px;
23  padding: 0px 12px;
24  background: #ffffffe5;
25  color: #0f1015;
26  border: none;
27  border-radius: 10px;
28  font-size: 14px;
29  font-weight: 600;
30  font-family: "Canva Sans", sans-serif;
31  box-shadow: rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.07) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 32px;
40  padding: 4px 8px;
41  background: transparent;
42  color: #ffffff;
43  border: none;
44  border-radius: 12px;
45  font-size: 13.3333px;
46  font-weight: 400;
47  font-family: "Canva Sans", sans-serif;
48  cursor: pointer;
49}

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/canva.com/DESIGN.md

Tombol di canva.com