Her seferinde bir ayrıntı olacak şekilde CSS düğmeleri oluşturun.
Bir düğmeyi görsel olarak tasarlayın ve web sitenizde kullanmak için HTML ve CSS değerlerini alın. Bir hazır ayar ile başlayın; tipografiyi, renkleri, şekli ve gölgeleri ayarlayın, ardından dışa aktarmadan önce etkileşim durumlarını önizleyin.
Bir başlangıç noktası seçinKendi tarzınızı yansıtın
Günlük, Klasik, Şekilli, Etkileyici, Gradyanlar ve Seçkin koleksiyonları genelindeki 44 hazır ayarlarını inceleyin. Her hazır ayar, düzenleyebileceğiniz bir başlangıç noktasıdır.
Hazır ayarlar tasarımınızı nasıl etkiler?
Önce seçin, sonra ince ayar yapın
Galeriyi daraltmak için Stil koleksiyonunu kullanın. Bir hazır ayar uygulamak, düğme metninizi ve sınıf adınızı korurken hem varsayılan hem de üzerine gelme (hover) stillerini değiştirir.
Basit bir dolgu, şekilli bir köşe, net bir dış çizgi veya daha dekoratif bir uygulama deneyin. Bir yön belirlediğinizde, ayrıntıların sayfanıza uymasını sağlamak için diğer sekmeleri kullanın.
Etiketin doğru hissettirmesini sağlayın
Düğme metnini, yazı tipi ailesini, boyutunu, kalınlığını, aralığını, satır yüksekliğini, hizalamasını ve metin rengini ayarlayın. Siz çalışırken etiketin güncellendiğini görün.
Metin ve boşluk ayarlarını yapın
Eyleme uygun tipografi
Metin, yazı tipi kontrollerini ve ikinci bir Düğme metni alanını içerir. Yazı tipi boyutu 10 ile 80 piksel arasında değişir; listelenen aileler, ziyaretçinin cihazında bulunan yazı tiplerini kullanır.
Eylemi tanımlayan kısa bir etiket kullanın. Dolgu kısmında, yatay ve dikey boşluklar, yazı tipi boyutunu değiştirmeden etiket çevresine boşluk ekler. Daha uzun etiketleri, düğmenin kullanılacağı sayfada kontrol edin.
Düz veya gradyan bir dolgu seçin
Tek bir arka plan rengi kullanın veya iki rengi doğrusal bir gradyanla harmanlayın. Renk seçiciler ve onaltılık (hex) girişler, görsel veya hassas bir şekilde çalışmanıza olanak tanır.
Renkleri ve gradyan yönünü ayarlayın
İki renk, tek bir net yön
Dolgu kısmında, İkinci renk ve Gradyan açısını ortaya çıkarmak için Dolgu stilini Doğrusal gradyan olarak değiştirin. Açı 0 ile 360 derece arasında değişir.
Hex alanları, tam altı haneli bir renk kodunu veya üç haneli kısaltmayı kabul eder. Beyaz veya renkli etiketi gradyanın her iki ucuna karşı test edin; stüdyo, metin kontrastını otomatik olarak onaylamaz.
Dış çizgiyi ve derinliği kontrol edin
Bağlantılı veya bağımsız köşeleri, kenarlık genişliğini ve stilini, kutu gölgelerini ve metin gölgelerini ayarlayın. Düğmeye bağlamına uygun bir şekil verin.
Köşeleri, kenarlıkları ve gölgeleri keşfedin
Net bir dikdörtgenden yumuşak bir hap şekline
Şekil kısmında, ortak bir yarıçap için Tüm köşeleri bağla seçeneğini açık tutun veya her köşeyi ayrı ayarlamak için kapatın. Kenarlık stilleri arasında düz, kesikli, noktalı, çift, içe dönük, dışa dönük, kabartma, oluklu ve yok seçenekleri bulunur.
Gölge kısmında, yatay ve dikey ofsetleri, bulanıklığı, rengi ve opaklığı ayarlayın. Kutu gölgesinde ayrıca yayılma ve içe dönük (inset) anahtarı bulunur. Metin gölgesi ayrıdır, böylece düğme dış çizgisini değiştirmeden etikete derinlik ekleyebilirsiniz.
Etkileşimi de tasarlayın
Varsayılan ve Üzerine gelme (Hover) stillerini ayrı ayrı düzenleyin. Varsayılan, Üzerine gelme ve Etkin görünümleri önizleyin, ardından düğmeyi açık ve koyu tuvaller üzerinde karşılaştırın.
Düzenleme ve önizleme durumlarını anlayın
İki düzenlenebilir stil, üç önizleme durumu
Düzenleme durumu, kontrollerinizin hangi stili değiştireceğini seçer. Tuval durumu düğmeleri yalnızca önizlemeyi seçer. Önizlemenin üzerine gelmek veya basmak, etkileşimini de gösterir.
Varsayılan ile eşleşen üzerine gelme değerleri, özelleştirilene kadar temel düzenlemeleri takip eder. Dışa aktarılan CSS, gerektiğinde bir üzerine gelme kuralı, odaklanma görünürlüğü dış çizgisi, etkin hareket ve azaltılmış hareket kuralı içerir.
CSS değerini projenize dahil edin
Oluşturulan CSS kodunu ve eşleşen HTML düğmesini kopyalayın veya bir stil sayfası indirin. Bir sınıf adı, iki parçayı birbirine bağlı tutar.
Kopyalayın, indirin ve çalışmanızı saklayın
Doğrudan kullanabileceğiniz sade kod
Ayırt edici bir Sınıf adı seçin, CSS kodunu sekmesinden kopyalayın, ardından düğmeyi HTML kısmından kopyalayın. İndirme işlemi, sınıf adıyla adlandırılmış bir .css dosyası kaydeder; tam bir web sayfası indirmez.
Önizleme ve kod oluşturma tarayıcınızda çalışır. Stüdyo, bu tarayıcının yerel depolama alanında bir taslağı hatırlamaya çalışır; saklamak istediğiniz her şeyi dışa aktarın. Sıfırla, stüdyoyu başlangıç stiline döndürür.
Metin ve stiller içeri. HTML ve CSS dışarı.
Yükleme gerekmez. JavaScript, tarayıcınızdaki canlı düzenleyiciye güç verir. HTML ve CSS kodlarını ayrı ayrı kopyalayın veya CSS stil sayfasını indirin. Oluşturulan yazı tipi yığını, görüntüleyicinin cihazında bulunan yazı tiplerini kullanır.
