CSS Gold Button Generator

Tombol metalik membutuhkan gradien yang menangkap cahaya dari atas ke bawah, bukan sekadar warna datar. Alat ini memungkinkan Anda mengetik teks tombol, memilih gaya logam — Emas, Perak, Perunggu, atau Emas Mawar — menyesuaikan radius sudut, dan langsung menghasilkan kode CSS dengan pratinjau langsung.

Apa Itu Alat Ini?

Alat ini menerapkan gradien linear tiga titik warna preset untuk setiap gaya logam, disesuaikan agar terlihat seperti cahaya yang memantul dari permukaan logam yang dipoles.

Beralih antara Emas, Perak, Perunggu, dan Emas Mawar menggunakan pemilih gaya, masing-masing dengan gradien, warna teks, dan bayangan tersendiri yang disesuaikan dengan logam tersebut.

Pratinjau langsung diperbarui secara instan saat Anda mengetik teks tombol, mengganti gaya, atau menyesuaikan radius sudut, sehingga Anda bisa melihat persis bagaimana tampilannya sebelum menyalin CSS.

Mengapa Menggunakannya?

Kamu bikin landing page produk skincare lokal dan brand-nya punya tier "Member Gold" dengan diskon khusus — generate tombol Emas di sini buat CTA "Gabung Member Gold" biar kelihatan eksklusif dibanding tombol biru biasa.
Kamu develop halaman pricing buat SaaS lokal dengan tiga tier langganan dan mau tier termahal terlihat paling premium secara visual — pakai gaya Emas Mawar untuk tier itu supaya langsung menarik perhatian tanpa perlu badge tambahan.
Toko online kamu jualan barang preloved branded dan mau tombol "Beli Sekarang" untuk kategori barang eksklusif terlihat beda dari kategori biasa — coba gaya Perak buat kesan mewah yang lebih netral dibanding emas.
Kamu bikin sertifikat digital atau e-badge buat peserta workshop online dan pengen elemen "Certified" terlihat seperti medali logam beneran — gaya Perunggu pas buat kesan achievement yang solid dan berkelas.
Klien freelance kamu jualan produk kerajinan tangan premium dan minta section "Beli Edisi Terbatas" kelihatan mewah tanpa nambah gambar berat yang bikin loading lambat — CSS murni dari generator ini ringan dan tetap kelihatan metalik.
Kamu lagi bikin halaman leaderboard game atau komunitas dan pengen tombol "Klaim Hadiah" buat pemenang top 3 terlihat berbeda sesuai peringkat — kombinasikan Emas untuk juara 1, Perak untuk juara 2, dan Perunggu untuk juara 3.

Cara Menggunakan

Ketik teks tombol Anda.
Pilih gaya logam — Emas, Perak, Perunggu, atau Emas Mawar.
Sesuaikan slider border radius agar sesuai dengan gaya sudut desain Anda.
Klik "Copy" untuk menyalin kode CSS yang dihasilkan dan tempelkan ke stylesheet Anda.

Contoh

Input

Text: "Buy Now", Style: Gold, Radius: 8

Output

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

CSS yang dihasilkan menggabungkan gradien metalik tiga titik warna, warna teks dan bayangan yang serasi, serta padding tombol standar untuk blok gaya yang siap pakai.

Sekilas gaya logam

Setiap gaya logam menggunakan gradien, warna teks, dan warna bayangannya sendiri yang telah disesuaikan.

Gaya	Corak Gradien	Warna Teks
Emas	Kuning-emas hangat, terang ke gelap ke terang	Cokelat-emas tua (#5c3d00)
Perak	Abu-abu terang sejuk, terang ke gelap ke terang	Abu-abu tua (#333333)
Perunggu	Cokelat-tembaga hangat, terang ke gelap ke terang	Cokelat tua (#3e2408)
Emas Mawar	Merah muda lembut, terang ke gelap ke terang	Mawar tua (#4a1620)

Alat terkait

Untuk lebih banyak generator CSS, coba yang berikut ini.

→ Neon Text Generator · CSS Emboss Text Generator · Border Radius Generator

Memilih gaya logam yang tepat sesuai konteks bisnis

Emas paling cocok untuk konteks yang ingin terasa mewah dan mengundang tindakan segera — tombol checkout, promo terbatas, atau membership tier tertinggi. Warnanya hangat dan langsung menarik mata, tapi kalau dipakai berlebihan di satu halaman bisa terasa terlalu ramai.

Perak cocok untuk konteks yang ingin terasa netral dan profesional tanpa kehilangan kesan premium — cocok untuk tombol sekunder, tier menengah pada halaman pricing, atau brand yang temanya modern dan minimalis dibanding mewah tradisional.

Perunggu dan Emas Mawar lebih pas untuk konteks yang lebih spesifik — Perunggu memberi kesan solid dan achievement (cocok untuk badge atau ranking), sementara Emas Mawar memberi kesan lembut dan feminin yang cocok untuk brand kecantikan atau lifestyle yang menyasar audiens tertentu.

Pertanyaan yang Sering Diajukan

Mengapa gradien memiliki tiga titik warna, bukan dua?

Gradien tiga titik warna (terang, gelap, terang) meniru bagaimana cahaya memantul dari permukaan logam yang melengkung atau disikat, yang terlihat jauh lebih realistis dibandingkan gradasi dua warna sederhana dari terang ke gelap.

Bisakah saya menggunakan ini pada elemen link atau div, bukan button?

Ya — CSS yang dihasilkan hanyalah properti standar background, color, border-radius, box-shadow, dan text-shadow, sehingga bisa digunakan pada elemen apa pun yang biasanya Anda gayakan sebagai tombol.

Mengapa warna teksnya gelap, bukan putih?

Permukaan metalik seperti emas dan perunggu paling cocok dengan warna teks gelap dan hangat yang sesuai dengan corak logamnya — teks putih cenderung terlihat datar dan merusak ilusi metalik.

Apakah alat ini menyimpan atau melacak apa yang saya ketik?

Tidak. CSS dihasilkan sepenuhnya di peramban Anda — tidak ada yang dikirim atau disimpan di server.

Apakah ini akan berfungsi di semua peramban?

Ya — linear-gradient, box-shadow, dan text-shadow semuanya memiliki dukungan yang sangat baik di semua peramban modern, termasuk Chrome, Firefox, Safari, dan Edge.

Gaya logam mana yang paling cocok buat tombol "Beli Sekarang" di toko online?

Emas paling sering dipakai untuk kesan premium dan mengundang klik karena warnanya hangat dan mencolok. Tapi kalau produkmu bertema minimalis atau modern, Perak sering terlihat lebih elegan dan tidak terlalu mencolok dibanding Emas yang kesannya lebih mewah dan flamboyan.

Bisakah saya kombinasikan tombol dari generator ini dengan animasi hover CSS sendiri?

Bisa — CSS yang dihasilkan hanya mengatur tampilan dasar tombol, jadi kamu bebas menambahkan transition atau transform pada state :hover sendiri, misalnya sedikit membesar atau menggelapkan gradien saat kursor diarahkan ke tombol.

Apakah tombol metalik ini tetap kelihatan bagus di mode gelap (dark mode) website?

Umumnya iya, karena gradien logam yang dipakai sudah punya kontras tinggi terhadap latar gelap maupun terang. Tapi kalau website kamu punya toggle dark mode, sebaiknya tes dulu tombolnya di kedua mode karena warna bayangan (box-shadow) mungkin perlu disesuaikan supaya tetap terlihat jelas di background gelap.

Kenapa border tombolnya diset none, bukan pakai border logam?

Karena efek metalik pada tombol ini sepenuhnya dibangun dari gradien dan bayangan, bukan dari garis tepi — menambahkan border justru bisa merusak ilusi permukaan logam yang mulus. Kalau kamu tetap ingin ada tepi, tambahkan box-shadow tipis tambahan alih-alih properti border biasa.

Apakah generator ini cocok dipakai untuk tombol besar full-width di halaman mobile?

Cocok — karena gradiennya linear dari atas ke bawah, efeknya tetap konsisten terlihat bagus baik di tombol kecil maupun tombol lebar penuh layar, tidak seperti gradien radial yang bisa terlihat aneh kalau tombolnya terlalu lebar.