CSS Altın Buton Oluşturucu

Bu Araç Nedir?

Bu araç, cilalanmış bir metal yüzeyden yansıyan ışık gibi görünecek şekilde ayarlanmış, her metal stili için önceden tanımlanmış üç durak noktalı doğrusal bir gradyan uygular.

Stil seçici ile Altın, Gümüş, Bronz ve Rose Gold arasında geçiş yapın; her biri o metale özel kendi gradyanına, metin rengine ve gölgesine sahiptir.

Canlı önizleme, buton metninizi yazdıkça, stil değiştirdikçe veya köşe yarıçapını ayarladıkça anında güncellenir, böylece CSS'i kopyalamadan önce tam olarak nasıl görüneceğini görebilirsiniz.

Neden Kullanmalısınız?

• Bir fiyatlandırma sayfası kuruyorsunuz ve "Premium'a Yükselt" butonunun altındaki ücretsiz plan butonundan görsel olarak ayrışmasını istiyorsunuz — altın bir gradyan, sadece renk değişikliğinden daha hızlı "premium" mesajı verir.
• Bronz, Gümüş ve Altın seviyeli bir sadakat veya üyelik programı tasarlıyorsunuz — görsel hiyerarşinin isimlendirmeyle eşleşmesi için üç metal stilini de tek seferde oluşturun.
• Bir e-ticaret "Şimdi Satın Al" veya "Sepete Ekle" butonu şu anda düz bir marka rengi ve testler sayfada kaybolduğunu gösteriyor — metalik bir gradyan, metni değiştirmeden görsel ağırlık katar.
• Bir ödül veya sertifika sayfası mockup'ı hazırlıyorsunuz ve bir görsel düzenleyici açmadan altın, gümüş veya bronz olarak okunan bir rozete ihtiyacınız var.
• Çoğu altın buton oluşturucunun varsayılan olarak sunduğu daha yaygın sarı-altın görünüm yerine, belirli bir marka paletine (güzellik, mücevher, düğün siteleri) uyacak bir rose gold vurgu istiyorsunuz.
• %100 yerel: CSS tamamen tarayıcınızda oluşturulur, sunucuya hiçbir şey gönderilmez.

Nasıl Kullanılır

1. Buton metninizi yazın.
2. Bir metal stili seçin — Altın, Gümüş, Bronz veya Rose Gold.
3. Tasarımınızın köşe stiline uyacak şekilde kenar yarıçapı kaydırıcısını ayarlayın.
4. Oluşturulan CSS kodunu kopyalamak için "Kopyala"ya tıklayın ve stil sayfanıza yapıştırın.

Örnek

Giriş

Metin: "Buy Now", Stil: Altın, Yarıçap: 8

Çıkış

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;

Oluşturulan CSS, hazır kullanıma uygun bir stil bloğu için üç duraklı metalik bir gradyanı, eşleşen bir metin rengi ve gölgesini ve standart buton dolgusunu birleştirir.

Bir bakışta metal stilleri

Her metal stili kendi ayarlanmış gradyanını, metin rengini ve gölge rengini kullanır.

İlgili araçlar

Daha fazla CSS oluşturucu için bunları deneyin.

→ Neon Metin Oluşturucu · CSS Kabartma Metin Oluşturucu · Kenar Yarıçapı Oluşturucu

Kullanım durumunuza uygun metal stili seçmek

• Altın neredeyse evrensel olarak "premium" veya "yükselt" olarak okunur — fiyatlandırma sayfası CTA'ları, VIP seviyeleri ve abonelik üst satışları için en güvenli varsayılan seçimdir.
• Gümüş, bir altın seçeneğinin yanında "ikinci seviye" olarak iyi çalışır (Bronz/Gümüş/Altın sadakat programları) veya tek başına altından daha soğuk, daha kurumsal bir ton için kullanılabilir.
• Bronz, üçüncülük rozetlerine, giriş seviyesi üyelik katmanlarına veya altının daha güçlü "lüks" çağrışımı olmadan sıcak metalik bir his isteyen herhangi bir tasarıma uyar.
• Rose gold; güzellik, mücevher, düğün ve yaşam tarzı markalarına uyar, çünkü daha yaygın sarı-altın görünüm zaten pembemsi bir renk paletiyle çatışır.

Sıkça Sorulan Sorular