Stylepack

Tombol

Tombol di voiceflow.com

Tombol utama di voiceflow.com berwarna #397dff dengan teks #ffffff, sudut 8px, dan tinggi 37px. Di bawah ini: setiap varian tombol yang dipakai situs, state hover dan focus-nya, serta CSS agar tombol Anda tampil sama.

Diukur dari voiceflow.com 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Tombol primary

Get started
Hover
background #397dff → #2f68db, shadow deepens
Focus
outline 1px none rgb(255, 255, 255), offset 1px
Transisi
all, 0.2s

Tombol secondary

Pelajari lebih lanjut
Hover
background #397dff → #2f68db, shadow deepens
Transisi
background-color, color, opacity, box-shadow, border-color, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

Tombol ghost

Resources
Hover
tidak ada perubahan terlihat

CSS-nya

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 10px 14px;
  background: #397dff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: "UCity Pro", sans-serif;
  box-shadow: rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 0px;
  background: #ffffff;
  color: #1a1e23;
  border: none;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "UCity Pro", sans-serif;
  box-shadow: rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 4px 12px;
  background: transparent;
  color: #515a63;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 400;
  font-family: "UCity Pro", sans-serif;
  cursor: pointer;
}

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

Pertanyaan

Bagaimana cara membuat tombol seperti voiceflow.com?

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

Apa warna tombol voiceflow.com?

Tombol utama di voiceflow.com berwarna #397dff 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 voiceflow.com?

Bisa. Paket desain voiceflow.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.