Bu örnek sadece oluşturucunun kontrollerini kullanır. Yukarıdaki görseller, editörün ekran görüntüleri değil, standart HTML düğmelerine uygulanan gerçek indirilmiş stil sayfalarını gösterir.
Signature ile başlayın
CSS Düğme Oluşturucu'yu açın. Hazır Ayarlar içinde Everyday koleksiyonundan Signature'ı seçin. Düğme metnini “Get started” olarak ayarlayın. Kod alanında Sınıf adını cta-button olarak belirleyin.
Bir hazır ayar, varsayılan ve üzerine gelme stillerini değiştirirken, etiketiniz ve sınıf adınız aynı kalır. Detaylı ayarlamalar yapmadan önce başlangıç noktanızı seçin.
Sınıf adı, CSS kurallarını HTML düğmenize bağlar. Oluşturucu desteklenmeyen karakterleri temizler; ilgili olmayan öğelerin stillenmesini önlemek için kısa ve ayırt edici bir ad kullanın.
Gradyan hapı oluşturun
Düzenleme durumunu Varsayılan'da tutun. Metin içinde System sans seçin, Yazı tipi boyutu 18 px ve Ağırlık Kalın olsun. Beyaz metin rengini, normal stili, ortalanmış hizalamayı ve satır yüksekliğini 1.4 olarak koruyun.
Dolgu içinde Doğrusal gradyan seçin. Aşağıdaki iki rengi ve açıyı kullanın. Yatay dolguyu 32 px ve Dikey dolguyu 16 px olarak ayarlayın. Şekil içinde Tüm köşeleri bağla seçeneğini etkin tutun ve Köşe yarıçapını 100 px olarak ayarlayın. Kenarlık genişliği 0 px kalır.
Gölge içinde Kutu gölgesini etkin tutun. Yatay ofset 0 px, dikey ofset 8 px, bulanıklık 24 px, yayılma −4 px, renk #460BD8 ve opaklık 32% kullanın. İç gölge ve Metin gölgesini kapalı bırakın.
Dolgu, metnin etrafındaki boşluğu değiştirir. Köşe yarıçapı ana hatları değiştirir. Büyük bir yarıçap, etiketi genişletmeden bu hap şeklini oluşturur.
Üzerine gelme durumuna özel bir işlem uygulayın
Düzenleme durumunu Üzerine Gelme olarak değiştirin. Dolgu içinde Arka plan rengini #33099E ve İkinci rengi #6D20BF olarak değiştirin. Gradyan açısını 135°'de tutun. Gölge içinde Dikey ofseti 10 px ve Bulanıklığı 28 px olarak değiştirin. Diğer ayarları değiştirmeden bırakın.
Her durumu incelemek için tuvaldeki Varsayılan, Üzerine Gelme ve Etkin düğmelerini kullanın. Ayrıca önizleme düğmesinin üzerine gelebilir veya basabilirsiniz. Kenarını ve gölgesini incelemek için tuvali açık ve koyu mod arasında değiştirin.
Düzenleme durumu, hangi stilleri değiştireceğinizi seçer. Tuval durumu sadece önizlediklerinizi değiştirir. Dinlenme görünümünü ayarlamadan önce Varsayılan düzenlemeye dönün.
Varsayılan ile eşleşen üzerine gelme özellikleri, sonraki varsayılan düzenlemeleri takip eder. Bir üzerine gelme özelliğini özelleştirdiğinizde, bağımsız kalır. Temel stili değiştirdikten sonra her iki durumu da tekrar kontrol edin.
Dışa aktarın ve sayfanızda test edin
CSS sekmesini seçin ve CSS Kopyala'yı kullanın veya cta-button.css dosyasını kaydetmek için İndir'i seçin. HTML sekmesini seçin ve eşleşen düğme işaretlemesini kopyalayın. HTML, aynı sınıf adını ve type="button" olan bir düğmeyi içerir.
CSS dosyasını stil sayfanıza ekleyin veya indirilen dosyayı sayfanızdan bağlayın. HTML kodunu düğmenin ait olduğu yere yerleştirin. İki dışa aktarma birlikte çalışır: tek başına bir HTML düğmesi stillerini içermez.
Sayfayı açın ve varsayılan, üzerine gelme, klavye odağı ve basılı durumlarını test edin. Dışa aktarma, odaklanma görünür ana hattını, küçük bir etkin hareketi ve azaltılmış hareket kuralını içerir. Çevredeki stilleriniz ve yüklü yazı tipleriniz sonucu etkileyebilir.
Oluşturulan düğme stillendirilmiş bir kontroldür. Projenizdeki tıklama davranışını bağlayın; bir forma eklerken doğru düğme türünü kullanın.
cta-button.css
İndirilen dosya adı, sınıf adını takip eder.
Sıkça sorulan sorular
Bir CSS çerçevesine ihtiyacım var mı?
Hayır. Çıktı, standart CSS ve düz bir HTML düğmesidir. CSS kodunu kendi stil sayfanıza yapıştırın ve düğme üzerinde eşleşen sınıfı kullanın.
İndir düğmesi HTML dosyasını da kaydeder mi?
İndir, sınıf adıyla adlandırılmış bir .css dosyası kaydeder. Düğme işaretlemesini HTML sekmesinden ayrıca kopyalayın.
Her köşeye farklı bir yarıçap verebilir miyim?
Evet. Şekil içinde Tüm köşeleri bağla seçeneğini kapatın, ardından Sol üst, Sağ üst, Sağ alt ve Sol alt değerlerini bağımsız olarak ayarlayın. Bu örnek, hap şekli için onları bağlı tutar.
Tasarımım bir dahaki sefere burada olacak mı?
Stüdyo, mevcut taslağı bu tarayıcının yerel depolama alanına kaydetmeye çalışır. Bu bir hesap veya cihazlar arası yedekleme değildir. Tarayıcı ayarları, site verilerinin temizlenmesi veya Sıfırlama işlemi bunu kaldırabilir veya değiştirebilir, bu nedenle saklamak istediğiniz çalışmaları dışa aktarın.
Düğmem bir sunucuya mı yükleniyor?
Stil önizlemesi ve CSS/HTML oluşturma işlemleri tarayıcınızda çalışır. Düzenleyici, dışa aktarma işlemini oluşturmak için düğme metninizi veya stil taslağınızı sunucuya yüklemez.
Bir sonraki düğmenize kendi tarzınızı katın.
Bir başlangıç noktası seçin, detayları ayarlayın ve kodu projenize dahil edin.